W3C home > Mailing lists > Public > public-webevents@w3.org > January to March 2011

Re: Transform Action Event Interface proposal

From: Olli Pettay <Olli.Pettay@helsinki.fi>
Date: Wed, 19 Jan 2011 15:44:46 +0200
Message-ID: <4D36EACE.7050407@helsinki.fi>
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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 19 January 2011 13:45:26 GMT