Skip to content

Commit

Permalink
[giow] (0) More work on event rerouting for hit regions
Browse files Browse the repository at this point in the history 
Affected topics: Canvas, HTML

git-svn-id: http://svn.whatwg.org/webapps@8544 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information
@Hixie
Hixie committed Mar 14, 2014
1 parent c12bc2d commit 9a438a9
Show file tree
Hide file tree
Showing 4 changed files with 242 additions and 153 deletions.
123 changes: 75 additions & 48 deletions complete.html
View file
Expand Up @@ -298,7 +298,7 @@

<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 13 March 2014</h2>
<h2 class="no-num no-toc">Living Standard &mdash; Last Updated 14 March 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
Expand Down Expand Up @@ -58690,6 +58690,9 @@ <h6 id=hit-regions><span class=secno>4.12.4.2.15 </span>Hit regions</h6>
<li><p>If <var title="">control</var> is not a descendant of <var title="">ancestor</var>, then
return nothing and abort these steps.</li>

<li><p>If <var title="">control</var> is no longer a <a href=#supported-interactive-canvas-fallback-element>supported interactive canvas fallback
element</a>, then return nothing and abort these steps.</li>

<li><p>Otherwise, return <var title="">control</var>.</li>

</ol><p><dfn id=the-cursor-for-a-hit-region>The cursor for a hit region</dfn> <var title="">region</var> of a <code><a href=#the-canvas-element>canvas</a></code>
Expand Down Expand Up @@ -58747,7 +58750,36 @@ <h6 id=hit-regions><span class=secno>4.12.4.2.15 </span>Hit regions</h6>
reset, e.g. when a <code><a href=#canvasrenderingcontext2d>CanvasRenderingContext2D</a></code> object is bound to or unbound from a
<code><a href=#the-canvas-element>canvas</a></code>, or when the dimensions of the bitmap are changed.</p>

<hr><p>When the <dfn id=dom-context-2d-addhitregion title=dom-context-2d-addHitRegion><code>addHitRegion()</code></dfn> method is
<hr><p>An element is a <dfn id=supported-interactive-canvas-fallback-element>supported interactive canvas fallback element</dfn> if it is one of the
following:</p>

<ul class=brief><li><p>an <code><a href=#the-a-element>a</a></code> element that <a href=#represents>represents</a> a
<a href=#hyperlink>hyperlink</a> and that does not have any <code><a href=#the-img-element>img</a></code> descendants</li>

<li><p>a <code><a href=#the-button-element>button</a></code> element</li>

<li><p>an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code>
attribute is in one of the <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> or <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio Button</a> states</li>

<li><p>an <code><a href=#the-input-element>input</a></code> element that is a <a href=#concept-button title=concept-button>button</a></li>

<li><p>a <code><a href=#the-select-element>select</a></code> element with a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute or a <a href=#concept-select-size title=concept-select-size>display size</a> greater than 1</li>

<li><p>an <code><a href=#the-option-element>option</a></code> element that is in a <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> of a <code><a href=#the-select-element>select</a></code> element
with a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute or a <a href=#concept-select-size title=concept-select-size>display size</a> greater than 1</li>

<li><p>a <a href=#sorting-interface-th-element>sorting interface <code>th</code> element</a></li>

<li><p>an element that would not be <a href=#interactive-content>interactive content</a> except for having the
<code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute specified</li>

<!-- so that people can do grids, like crosswords, yet let AT users select rows, or the
entire table, to see the whole context -->
<li><p>a non-<a href=#interactive-content title="interactive content">interactive</a> <code><a href=#the-table-element>table</a></code>,
<code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>,
<code><a href=#the-tr-element>tr</a></code>, <code><a href=#the-td-element>td</a></code>, or <code><a href=#the-th-element>th</a></code> element</li>

</ul><hr><p>When the <dfn id=dom-context-2d-addhitregion title=dom-context-2d-addHitRegion><code>addHitRegion()</code></dfn> method is
invoked, the user agent must run the following steps:</p>

<ol><li><p>Let <var title="">arguments</var> be the dictionary object provided as the method's
Expand Down Expand Up @@ -58812,39 +58844,8 @@ <h6 id=hit-regions><span class=secno>4.12.4.2.15 </span>Hit regions</h6>

<li><p>The <var title="">specified pixels</var> has no pixels.</li>

<li>

<p>The <var title="">arguments</var> object's <code title=dom-HitRegionOptions-control><a href=#dom-hitregionoptions-control>control</a></code> member is not one of the following:</p>

<ul class=brief><li><p>null</li>

<li><p>an <code><a href=#the-a-element>a</a></code> element that <a href=#represents>represents</a> a
<a href=#hyperlink>hyperlink</a></li>

<li><p>a <code><a href=#the-button-element>button</a></code> element</li>

<li><p>an <code><a href=#the-input-element>input</a></code> element whose <code title=attr-input-type><a href=#attr-input-type>type</a></code>
attribute is in one of the <a href="#checkbox-state-(type=checkbox)" title=attr-input-type-checkbox>Checkbox</a> or <a href="#radio-button-state-(type=radio)" title=attr-input-type-radio>Radio Button</a> states</li>

<li><p>an <code><a href=#the-input-element>input</a></code> element that is a <a href=#concept-button title=concept-button>button</a></li>

<li><p>a <code><a href=#the-select-element>select</a></code> element with a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute or a <a href=#concept-select-size title=concept-select-size>display size</a> greater than 1</li>

<li><p>an <code><a href=#the-option-element>option</a></code> element that is in a <a href=#concept-select-option-list title=concept-select-option-list>list of options</a> of a <code><a href=#the-select-element>select</a></code> element
with a <code title=attr-select-multiple><a href=#attr-select-multiple>multiple</a></code> attribute or a <a href=#concept-select-size title=concept-select-size>display size</a> greater than 1</li>

<li><p>a <a href=#sorting-interface-th-element>sorting interface <code>th</code> element</a></li>

<li><p>an element that would not be <a href=#interactive-content>interactive content</a> except for having the
<code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute specified</li>

<!-- so that people can do grids, like crosswords, yet let AT users select rows, or the
entire table, to see the whole context -->
<li><p>a non-<a href=#interactive-content title="interactive content">interactive</a> <code><a href=#the-table-element>table</a></code>,
<code><a href=#the-caption-element>caption</a></code>, <code><a href=#the-thead-element>thead</a></code>, <code><a href=#the-tbody-element>tbody</a></code>, <code><a href=#the-tfoot-element>tfoot</a></code>,
<code><a href=#the-tr-element>tr</a></code>, <code><a href=#the-td-element>td</a></code>, or <code><a href=#the-th-element>th</a></code> element</li>

</ul></li>
<li><p>The <var title="">arguments</var> object's <code title=dom-HitRegionOptions-control><a href=#dom-hitregionoptions-control>control</a></code> member is neither null nor a
<a href=#supported-interactive-canvas-fallback-element>supported interactive canvas fallback element</a>.</li>

<li><p>The <var title="">parent region</var> is not null but has a <a href="#hit-region's-control" title="hit region's
control">control</a>.</li>
Expand Down Expand Up @@ -59002,7 +59003,7 @@ <h6 id=hit-regions><span class=secno>4.12.4.2.15 </span>Hit regions</h6>

</ol></div>

<hr><p>The <code><a href=#mouseevent>MouseEvent</a></code> interface is extended to support hit
<hr><!--CLEANUP--><p>The <code><a href=#mouseevent>MouseEvent</a></code> interface is extended to support hit
regions:</p>

<pre class=idl>partial interface <a href=#mouseevent id=MouseEvent-partial>MouseEvent</a> {
Expand All @@ -59017,6 +59018,7 @@ <h6 id=hit-regions><span class=secno>4.12.4.2.15 </span>Hit regions</h6>

<dd>

<!--CLEANUP-->
<p>If the mouse was over a <a href=#hit-region>hit region</a>, then this returns the <a href="#hit-region's-id">hit region's ID</a>, if it has one.</p>

<p>Otherwise, returns null.</p>
Expand All @@ -59031,14 +59033,26 @@ <h6 id=hit-regions><span class=secno>4.12.4.2.15 </span>Hit regions</h6>
ID</a> if the mouse was over a hit region when the event was fired.</p>

<p>When a <code><a href=#mouseevent>MouseEvent</a></code> is to be fired at a <code><a href=#the-canvas-element>canvas</a></code> element by the user
agent in response to a pointing device action, if the <code><a href=#the-canvas-element>canvas</a></code> element has a <a href=#hit-region-list>hit
region list</a>, the user agent must instead follow these steps. If these steps say to <i>act
as normal</i>, that means that the event must be fired as it would have had these requirements not
been applied.</p>
agent in response to a pointing device action other than a click (e.g. a <code title=event-mousedown><a href=#event-mousedown>mousedown</a></code> event or a <code title=event-mousemove><a href=#event-mousemove>mousemove</a></code> event), the user agent must run the <a href=#canvas-mouseevent-rerouting-steps>canvas
<code>MouseEvent</code> rerouting steps</a> immediately prior to dispatching the event<!--
interaction event spec point -->. This does not affect default actions (so for instance, if the
event gets rerouted to an element that has a default action for <code title=event-mousemove><a href=#event-mousemove>mousemove</a></code> events, this default action doesn't trigger<!-- this
would be significantly more obvious if there was a real spec defining how mouse events trigger
that we could actually properly hook into -->).</p>

<p class=note>Actual clicks are handled by the <a href=#run-authentic-click-activation-steps>run authentic click activation
steps</a>, which also invoke these steps.</p>

<p>The <dfn id=canvas-mouseevent-rerouting-steps>canvas <code>MouseEvent</code> rerouting steps</dfn> are as follows. If these steps
say to <i>act as normal</i>, that means that the event must be fired as it would have had these
requirements not been applied.</p>

<ol><li><p>If the pointing device is not indicating a pixel on the <code><a href=#the-canvas-element>canvas</a></code>, act as normal
and abort these steps.</li>

<li><p>If the <code><a href=#the-canvas-element>canvas</a></code> element has no <a href=#hit-region-list>hit region list</a>, then act as normal
and abort these steps.</li>

<li><p>Let <var title="">pixel</var> be the pixel indicated by the pointing device.</li>

<li><p>Let <var title="">region</var> be the <a href=#hit-region>hit region</a> that is <a href=#the-region-for-a-pixel title="the
Expand Down Expand Up @@ -76320,22 +76334,34 @@ <h3 id=activation><span class=secno>8.3 </span>Activation</h3>

<li><p>Set the <var title="">click in progress</var> flag on the element to false.</li>

</ol><p>When a pointing device is clicked, the user agent must run these steps:</p>
</ol><p>When a pointing device is clicked, the user agent must <a href=#run-authentic-click-activation-steps>run authentic click activation
steps</a> instead of firing the click event<!-- interaction event spec point -->. When a user
agent is to <dfn id=run-authentic-click-activation-steps>run authentic click activation steps</dfn> for a given event <var title="">event</var>, it must follow these steps:</p>

<ol><li><p>If the element's <var title="">click in progress</var> flag is set to true, then abort
these steps.</li>
<ol><li><p>Let <var title="">target</var> be the element designated by the user (the target of <var title="">event</var>).</li>

<li><p>Set the <var title="">click in progress</var> flag on the element to true.</li>
<li><p>If <var title="">target</var> is a <code><a href=#the-canvas-element>canvas</a></code> element, run the <a href=#canvas-mouseevent-rerouting-steps>canvas
<code>MouseEvent</code> rerouting steps</a>. If this changes <var title="">event</var>'s
target, then let <var title="">target</var> be the new target.</li>

<!--(this is commented out because you can't possibly get here reentrantly and you can't get here while click() is running.)
<li><p>If <var title="">target</var>'s <var title="">click in progress</var> flag is set to
true, then abort these steps.</p></li>
-->

<li><p>Set the <var title="">click in progress</var> flag on <var title="">target</var> to
true.</li>

<li><p>Let <var title="">e</var> be the <a href=#nearest-activatable-element>nearest activatable element</a> of the element
designated by the user (defined below), if any.</li>
<li><p>Let <var title="">e</var> be the <a href=#nearest-activatable-element>nearest activatable element</a> of <var title="">target</var> (defined below), if any.</li>

<li><p>If there is an element <var title="">e</var>, <a href=#run-pre-click-activation-steps>run pre-click activation steps</a>
on it.</li>

<li>

<p><a href=#concept-event-dispatch title=concept-event-dispatch>Dispatch</a> the required <code title=event-click><a href=#event-click>click</a></code> event.</p> <!-- interaction event spec point -->
<p><a href=#concept-event-dispatch title=concept-event-dispatch>Dispatch</a> <var title="">event</var> (the
required <code title=event-click><a href=#event-click>click</a></code> event) at <var title="">target</var>.</p> <!--
interaction event spec point -->

<p>If there is an element <var title="">e</var> and the <code title=event-click><a href=#event-click>click</a></code>
event is not canceled, <a href=#run-post-click-activation-steps>run post-click activation steps</a> on element <var title="">e</var>.</p>
Expand All @@ -76345,7 +76371,8 @@ <h3 id=activation><span class=secno>8.3 </span>Activation</h3>

</li>

<li><p>Set the <var title="">click in progress</var> flag on the element to false.</li>
<li><p>Set the <var title="">click in progress</var> flag on <var title="">target</var> to
false.</li>

</ol><p class=note>The algorithms above don't run for arbitrary synthetic events dispatched by author
script. The <code title=dom-click><a href=#dom-click>click()</a></code> method can be used to make the <a href=#run-synthetic-click-activation-steps>run
Expand Down
Binary file modified images/Qp-overlap-outline.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9a438a9

Please sign in to comment.