- From: Olli Pettay <Olli.Pettay@helsinki.fi>
- Date: Wed, 19 Jan 2011 15:44:46 +0200
- To: Cathy.Chan@nokia.com
- CC: public-webevents@w3.org
Hi Cathy,
have you thought how event targeting should work with transform action
events? I mean if user starts a tranformaction above element A and then
while doing the action user moves mouse/touch/whatever to over element
B, which element should be the target for the events.
Also, what happens in cases when DOM is mutated; what if user
starts transformaction over element A, but during the action A
is adopted to a different document in a different window.
Which element should be the target in that case?
(IIRC Starlight used to have a bug, or the behavior was undefined,
related to event target when DOM is mutated)
-Olli
On 01/10/2011 10:07 PM, Cathy.Chan@nokia.com wrote:
> Hi all,
>
> Nokia proposes the Transform Action Event Interface to the Web Events WG for consideration.
>
> The proposal addresses the representational level of touch interactions described in the scope of the WG charter [1].
>
> While low-level touch events can convey the touch actions performed by the user, they do not necessarily convey the high-level intent of the user. This proposal bridges this gap by introducing three new event types to enable direct manipulation of a DOM element in response to a user interaction. As the user performs an action or gesture to request a "pan", "zoom" or "rotate" transformation to a DOM element, a series of transform action events are fired, allowing recipients of the events to perform the corresponding operations on the DOM element.
>
> The proposed events provide web authors with an alternative to working with low-level touch events to create highly interactive web applications. Demonstrations [2] of the usage of these APIs have been developed by Thomas Fuchs, the creator of the script.aculo.us Javascript library [3].
>
> For additional information, please also see the Nokia Starlight project [4]..
>
> Regards, Cathy Chan.
>
>
> [1] http://www.w3.org/2010/webevents/charter/
> [2] http://scripty2.com/demos/touch/
> [3] http://script.aculo.us/
> [4] http://starlight-webkit.org/Starlight/
>
>
>
>
>
> TransformActionProposal.html
>
>
> Transform Action Event Interface
>
>
>
>
> Editor:
> Cathy Chan, Nokia
>
> Copyright <http://www.w3.org/Consortium/Legal/ipr-notice#Copyright> ©
> 2010 Nokia <http://www.nokia.com/>
>
> ------------------------------------------------------------------------
>
>
> Abstract
>
> This document describes event types that can be used for building
> directly manipulated user interfaces.
>
>
> Status of This Document
>
> Nokia hereby grants to the W3C a perpetual, nonexclusive, royalty-free,
> world-wide right and license under any Nokia copyrights on this
> contribution, to copy, publish and distribute the contribution under the
> W3C document licenses.
>
> Additionally, should the submission be used as a contribution towards a
> W3C Activity, Nokia grants a right and license of the same scope to any
> derivative works prepared by the W3C and based on, or incorporating all
> or part of, the contribution. Nokia further agrees that any derivative
> works of this contribution prepared by the W3C shall be solely owned by
> the W3C.
>
> Nokia Corporation agrees to offer W3C members and non-members granting
> reciprocal terms a non-assignable, non-sublicensable, worldwide and
> royalty free license to make, have made, use, sell, have sold, offer to
> sell, import, and distribute and dispose of implementations of any
> portion of the submission that is subsequently incorporated into a W3C
> Recommendation. Such license shall extend to all Essential Claims owned
> or controlled by Nokia Corporation and shall be available as long as the
> Recommendation is in effect.
>
>
> Table of Contents
>
> * 1. Introduction <#introduction>
> o 1.1 Usage Examples <#examples>
> * 2. Security and Privacy Considerations <#security>
> * 3. Event definitions <#event>
> * 4. Event firing order <#order>
> * 5. TransformActionEvent module <#api>
> o 5.1 TransformActionEvent interface <#transformactionevent>
> + 5.1.1 Attributes <#attributes>
> + 5.1.2 Methods <#methods>
> * 6. Related documents <#related>
> * A. References <#references>
> o A.1 Normative references <#normative-references>
> o A.2 Informative references <#informative-references>
>
>
> 1. Introduction
>
> Touch screens with directly manipulated user interface have become
> mainstream in portable devices. Current web technology is specified for
> mouse use and implementation of direct manipulation is kludgy and non
> portable at best.
>
> This document describes three new event types to enable direct
> manipulation of a DOM element. Typically these events are generated as
> the user does an action or gesture such as "pan", "zoom", or "rotate"
> requesting transformation of a visual element. As the gestures and
> actions to transform a visual element vary from device to device, this
> proposal abstracts them out and provides interface to the actual action
> the end user is attempting to do.
>
>
> 1.1 Usage Examples
>
> Example 1.
>
> A box that can be dragged, rotated, and scaled on the screen.
>
> <html>
> <head>
> <style>
> #box{
> position: absolute;
> border: 3px solid black;
> width: 200px;
> height: 200px;
> left: 200px;
> top: 100px;
> }
> </style>
> </head>
> <body>
> <div id="box"
> ontransformactionstart="transformStart(event);"
> ontransformactionupdate="transformUpdate(event);"
> ontransformactionend="transformEnd(event);"></div>
> <script>
> // Initialize the current transform values
> var curX= 0;
> var curY= 0;
> var curRotation= 0;
> var curScalefactor= 1.0;
> var box= document.getElementById("box");
>
> function transformStart(e) {
> // Prevent browser zoom
> e.preventDefault();
> }
>
> function transformUpdate(e) {
> // Set the new transform
> box.style.transform=
> "translate(" + (curX+ e.translateX) + "px," + (curY+ e.translateY) + "px)" +
> "rotate(" + (curRotation+ e.rotate) + "rad)" +
> "scale(" + (curScalefactor* e.scale) + ")";
> }
>
> function transformEnd(e) {
> // Update the current transform values
> curX+= e.translateX;
> curY+= e.translateY;
> curRotation+= e.rotate;
> curScalefactor*= e.scale;
> }
> </script>
> </body>
> </html>
>
>
> 2. Security and Privacy Considerations
>
> No security or privacy issues identified.
>
>
> 3. Event definitions
>
> The following events are defined in this specification
>
> *Name* *Description* *How often?* *When?*
> |transformactionstart| The new transform action starts. Once Must be
> dispatched first.
> |transformactionupdate| The transform action continues. Zero or more May
> be dispatched zero or more times after a |transformactionstart|.
> |transformactionend| The transform action ends. Once Must be dispatched
> last.
>
> User agents must implement these events such that by default they do
> bubble, and are cancelable.
>
> User agents must ensure that these events trigger event listeners
> attached on the element nodes for that event on the capture and target
> phases.
>
> Default action for these events is implementation specific (for example,
> adjustment of the user agent zoom level.)
>
> These events are in the null namespace. Initialisation method assigns
> the null namespace automatically.
>
> In the |transformactionstart| event, attributes |rotate|, |translateX|,
> |translateY|, |rotateSpeed|, |scaleSpeed|, |translateSpeedX|, and
> |translateSpeedY| must always have the value zero and attribute |scale|
> must always have the value one.
>
>
> 4. Event firing order
>
> The user agent must dispatch a |transformactionstart| event when the
> user starts the interaction (for example, touches the screen).
>
> The user agent must dispatch one or more |transformactionupdate| events
> when the user continues the interaction (for example, moves finger(s) on
> the touch screen).
>
> When the user end the interfaction (for example, stops touching the
> screen), the user agent must dispatch a |transformactionend| event.
>
> In short, for the DOM element in question, there must one
> |transformactionstart| event, followed by zero or more
> |transformactionupdate|, followed by one |transformactionend| event.
>
> The user agent must dispatch all transformaction events immediately
> after related lower level events if such lower level event exists. For
> example, if the source of transformaction events is a touch screen, the
> transformaction events must be dispatched immediately after the touch
> events.
>
>
> 5. TransformActionEvent module
>
>
> 5.1 TransformActionEvent interface
>
> The |TransformAction| interface exposes the information in
> |transformactionstart|, |transformactionupdate|, and
> |transformactionend| events.
>
> [Supplemental]
> interfaceTransformActionEvent : UIEvent {
> readonly attributelong screenX <#widl-TransformAction-screenX>;
> readonly attributelong screenY <#widl-TransformAction-screenY>;
> readonly attributelong offsetX <#widl-TransformAction-offsetX>;
> readonly attributelong offsetY <#widl-TransformAction-offsetY>;
> readonly attributelong clientX <#widl-TransformAction-clientX>;
> readonly attributelong clientY <#widl-TransformAction-clientY>;
>
> readonly attributeboolean ctrlKey <#widl-TransformAction-ctrlKey>;
> readonly attributeboolean shiftKey <#widl-TransformAction-shiftKey>;
> readonly attributeboolean altKey <#widl-TransformAction-altKey>;
> readonly attributeboolean metaKey <#widl-TransformAction-metaKey>;
>
> readonly attributelong translateX <#widl-TransformAction-translateX>;
> readonly attributelong translateY <#widl-TransformAction-translateY>;
> readonly attributelong translateSpeedX <#widl-TransformAction-translateSpeedX>;
> readonly attributelong translateSpeedY <#widl-TransformAction-translateSpeedY>;
> readonly attributefloat scale <#widl-TransformAction-scale>;
> readonly attributefloat scaleSpeed <#widl-TransformAction-scaleSpeed>;
> readonly attributefloat rotate <#widl-TransformAction-rotate>;
> readonly attributefloat rotateSpeed <#widl-TransformAction-rotateSpeed>;
>
> voidinitTransformActionEvent <#widl-TransformAction-initTransformActionEvent> (inDOMString type,inboolean canBubble,inboolean cancelable,inDOMWindow view,inlong screenX,inlong screenY,inlong clientX,inlong clientY,inboolean ctrlKey,inboolean altKey,inboolean shiftKey,inboolean metaKey,inlong translateX,inlong translateY,inlong translateSpeedX,inlong translateSpeedY,infloat scale,infloat scaleSpeed,infloat rotate,infloat rotateSpeed); };
>
>
> 5.1.1 Attributes
>
> |altKey| of type boolean, readonly
> Status of the alt key during the event.
> /No exceptions./
> |clientX| of type long, readonly
> The horizontal coordinate at which the event occurred relative to
> the origin of the viewport.
> /No exceptions./
> |clientY| of type long, readonly
> The vertical coordinate at which the event occurred relative to the
> origin of the viewport.
> /No exceptions./
> |ctrlKey| of type boolean, readonly
> Status of the control key during the event.
> /No exceptions./
> |metaKey| of type boolean, readonly
> Status of the meta key during the event.
> /No exceptions./
> |offsetX| of type long, readonly
> The horizontal coordinate at which the event occurred relative to
> the origin of the padding edge of the target node. [CSSOMView]
> /No exceptions./
> |offsetY| of type long, readonly
> The vertical coordinate at which the event occurred relative to the
> origin of the padding edge [CSSOMView] of the target node. [CSSOMView]
> /No exceptions./
> |rotate| of type float, readonly
>
> Rotation angle in radians, increasing angle meaning rotation clockwise.
>
> If just a single finger touches the screen, rotation is 0.
>
> /No exceptions./
> |rotateSpeed| of type float, readonly
> Rotation speed in radians per second. The user agent should use best
> effort to approximate the speed.
> /No exceptions./
> |scale| of type float, readonly
>
> Scale factor, between 0 and 1.0 for scale down, greater than 1.0 for
> scale up.
>
> For example 2.5 when the distance of touch points has increased
> 2.5-fold, i.e. element should be scaled 2.5 times its original size.
>
> If just a single finger touches the screen, scale is 1.0.
>
> /No exceptions./
> |scaleSpeed| of type float, readonly
> Speed of scaling in normalized scale factor change per second. The
> user agent should use best effort to approximate the speed.
> /No exceptions./
> |screenX| of type long, readonly
> The horizontal coordinate at which the event occurred relative to
> the origin of the screen.
> /No exceptions./
> |screenY| of type long, readonly
> The vertical coordinate at which the event occurred relative to the
> origin of the screen.
> /No exceptions./
> |shiftKey| of type boolean, readonly
> Status of the shift key during the event.
> /No exceptions./
> |translateSpeedX| of type long, readonly
> The horizontal panning speed in pixels per seconds in client
> coordinate space. The user agent should use best effort to
> approximate the speed.
> /No exceptions./
> |translateSpeedY| of type long, readonly
> The vertical panning speed in pixels per seconds in client
> coordinate space. The user agent should use best effort to
> approximate the speed.
> /No exceptions./
> |translateX| of type long, readonly
>
> The horizontal coordinate in client coordinate space that indicates
> the panning of the element. Translation coordinates are activated
> even with a single finger.
>
> Translation coordinates are always relative to the start of the
> touch. Thus there is no need to calculate absolute offsets of
> elements on the page when moving an element. Translation values can
> only be added to the starting position of an element.
>
> /No exceptions./
> |translateY| of type long, readonly
>
> The vertical coordinate in client coordinate space that indicates
> the panning of the element. Translation coordinates are activated
> even with a single finger.
>
> Translation coordinates are always relative to the start of the
> touch. Thus there is no need to calculate absolute offsets of
> elements on the page when moving an element. Translation values can
> only be added to the starting position of an element.
>
> /No exceptions./
>
>
> 5.1.2 Methods
>
> |initTransformActionEvent|
>
> This method is used to initialize the value of a
> TransformActionEvent object and has the same behavior as
> Event.initEventNS(), where the value of the namespace parameter is
> specified as null [D3E].
>
> Parameter Type Nullable Optional Description
> type |DOMString| ? ? This must be one of |transformactionstart|,
> |transformactionupdate|, or |transformactionend|. If it is not one
> of those values then this specification does not define the
> resulting event. Refer to the Event.initEvent() method [D3E] for
> further description of this parameter.
> canBubble |boolean| ? ? Specifies Event.bubbles. This parameter
> overrides the intrinsic bubbling behavior of the event and
> determines whether the event created will bubble
> cancelable |boolean| ? ? Specifies Event.cancelable. This parameter
> overrides the intrinsic cancel behavior of the event and determines
> whether the event created is cancelable
> view |DOMWindow| ? ? Specifies the DOM window in which the event
> occurred.
> screenX |long| ? ? The horizontal coordinate at which the event
> occurred relative to the origin of the screen.
> screenY |long| ? ? The vertical coordinate at which the event
> occurred relative to the origin of the screen.
> clientX |long| ? ? The horizontal coordinate at which the event
> occurred relative to the origin of the viewport.
> clientY |long| ? ? The vertical coordinate at which the event
> occurred relative to the origin of the viewport.
> ctrlKey |boolean| ? ? Status of the control key during the event.
> altKey |boolean| ? ? Status of the shift key during the event.
> shiftKey |boolean| ? ? Status of the alt key during the event.
> metaKey |boolean| ? ? Status of the meta key during the event.
> translateX |long| ? ? The horizontal coordinate in client coordinate
> space that indicates the panning of the element.
> translateY |long| ? ? The vertical coordinate in client coordinate
> space that indicates the panning of the element.
> translateSpeedX |long| ? ? The horizontal panning speed in pixels
> per seconds in client coordinate space. The user agent should use
> best effort to approximate the speed.
> translateSpeedY |long| ? ? The vertical panning speed in pixels per
> seconds in client coordinate space. The user agent should use best
> effort to approximate the speed.
> scale |float| ? ? Scale factor, between 0 and 1.0 for scale down,
> greater than 1.0 scale up. For example 2.5 when the distance of
> touch points has increased 2.5-fold, i.e. element should be scaled
> 2.5 times its original size.
> scaleSpeed |float| ? ? Speed of scaling in normalized scale factor
> change per second. The user agent should use best effort to
> approximate the speed.
> rotate |float| ? ? Rotation angle in radians, increasing angle
> meaning rotation clockwise.
> rotateSpeed |float| ? ? Rotation speed in radians per second. The
> user agent should use best effort to approximate the speed.
>
> /No exceptions./
> /Return type: /|void|
>
>
> 6. Related documents
>
> The API described in this document took inspiration from the following
> documents:
>
> * Nokia Starlight project <http://opensource.nokia.com/Starlight>
> * Progress Events 1.0 <http://www.w3.org/TR/progress-events/>
>
>
> A. References
>
>
> A.1 Normative references
>
> No normative references.
>
>
> A.2 Informative references
>
> No informative references.
>
Received on Wednesday, 19 January 2011 13:45:23 UTC