Update figure 2 to include new Event types (and remove old ones)
authorGary Kacmarcik <garykac@google.com>
Tue, 20 May 2014 18:13:48 -0700
changeset 639 bcd21eec1fe0
parent 638 14aad77c5c56
child 640 a10c8f662151
Update figure 2 to include new Event types (and remove old ones)
html/images/event-inheritance.svg
--- a/html/images/event-inheritance.svg	Tue May 20 17:28:07 2014 -0700
+++ b/html/images/event-inheritance.svg	Tue May 20 18:13:48 2014 -0700
@@ -1,22 +1,84 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     width="100%" height="100%" viewBox="0 0 960 230">
-
-  <title>DOM3 Events Interface Inheritance Diagram</title>
-  <desc>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="100%"
+   height="100%"
+   viewBox="0 0 960 230"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="event-inheritance.svg">
+  <metadata
+     id="metadata96">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1415"
+     inkscape:window-height="824"
+     id="namedview94"
+     showgrid="false"
+     inkscape:zoom="0.92382812"
+     inkscape:cx="468.04172"
+     inkscape:cy="91.599448"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <title
+     id="title4">DOM3 Events Interface Inheritance Diagram</title>
+  <desc
+     id="desc6">
     Event is the base interface.
     UIEvent, CustomEvent, and MutationEvent inherit from Event.
     FocusEvent, MouseEvent, KeyboardEvent, and CompositionEvent inherit from UIEvent.
     WheelEvent inherits from MouseEvent.
   </desc>
-  
-  <defs>
-    <marker id="contains" viewBox="-16 -7 18 14" refX="-2" markerWidth="9" markerHeight="7" orient="auto">
-      <desc>Based on symbol for "CONTAINS AS MEMBER", Unicode glyph U+220B</desc>
-      <path d="M-15,-5 L-5,-5 C0,-5 0,5 -5,5 L-15,5" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black"/>
+  <defs
+     id="defs8">
+    <marker
+       id="contains"
+       viewBox="-16 -7 18 14"
+       refX="-2"
+       markerWidth="9"
+       markerHeight="7"
+       orient="auto">
+      <desc
+         id="desc11">Based on symbol for &quot;CONTAINS AS MEMBER&quot;, Unicode glyph U+220B</desc>
+      <path
+         d="M-15,-5 L-5,-5 C0,-5 0,5 -5,5 L-15,5"
+         stroke-linejoin="round"
+         stroke-linecap="round"
+         fill="none"
+         stroke-width="2"
+         stroke="black"
+         id="path13" />
     </marker>
   </defs>
-  <style type="text/css"><![CDATA[
+  <style
+     type="text/css"
+     id="style15">
     .basic {
       fill: black;
       stroke: gray;
@@ -57,103 +119,385 @@
       stroke: none;
     }
 
-  ]]></style>
-  
-  
-  
-  <text id="caption" x="480" y="30" font-size="25" fill="black" text-anchor="middle" font-family="Verdana, sans-serif" font-weight="bold" >DOM3 Events Interface Inheritance</text>
-  
-  
-  <a id="Event" class="basic" transform="translate(20, 50)" xlink:href="../DOM3-Events.html#interface-Event" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
-    <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">Event</text>     
-  </a>
-  
-  <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
-     d="M225,60 H255"/>
-  <a id="UIEvent"  class="order1" transform="translate(260, 50)" xlink:href="../DOM3-Events.html#events-Events-UIEvent" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
-    <text x="100" y="16" font-size="18" fill="black" text-anchor="middle" font-family="Verdana, sans-serif">UIEvent</text>     
+  </style>
+  <text
+     id="caption"
+     x="480"
+     y="30"
+     font-size="25"
+     fill="black"
+     text-anchor="middle"
+     font-family="Verdana, sans-serif"
+     font-weight="bold">DOM3 Events Interface Inheritance</text>
+  <a
+     xlink:href="../DOM3-Events.html#interface-Event"
+     target="_parent"
+     transform="translate(20, 50)"
+     class="basic"
+     id="Event">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       stroke-width="2"
+       id="rect19" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       text-anchor="middle"
+       font-family="Verdana, sans-serif"
+       id="text21">Event</text>
   </a>
-  
-    <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
-      d="M465,60 H495"/>
-    <a id="FocusEvent"  class="order2" transform="translate(500, 50)" xlink:href="../DOM3-Events.html#events-Events-FocusEvent" target="_parent">
-      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
-      <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">FocusEvent</text>     
-    </a>
-
-    <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
-      d="M465,60 H470 Q475,60 475,65 V85 Q475,90 480,90 H495"/>
-    <a id="MouseEvent"  class="order2" transform="translate(500, 80)" xlink:href="../DOM3-Events.html#events-Events-MouseEvent" target="_parent">
-      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
-      <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">MouseEvent</text>     
-    </a>
-
-        <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
-          d="M705,90 H735"/>
-        <a id="WheelEvent"  class="order3" transform="translate(740, 80)" xlink:href="../DOM3-Events.html#events-Events-WheelEvent" target="_parent">
-          <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
-          <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">WheelEvent</text>     
-        </a>
-  
-    <!--<path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
+  <path
+     stroke-linejoin="round"
+     stroke-linecap="round"
+     fill="none"
+     stroke-width="2"
+     stroke="black"
+     marker-end="url(#contains)"
+     d="M225,60 H255"
+     id="path23" />
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-UIEvent"
+     target="_parent"
+     transform="translate(260, 50)"
+     class="order1"
+     id="UIEvent">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       stroke-width="2"
+       id="rect26" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       fill="black"
+       text-anchor="middle"
+       font-family="Verdana, sans-serif"
+       id="text28">UIEvent</text>
+  </a>
+  <path
+     stroke-linejoin="round"
+     stroke-linecap="round"
+     fill="none"
+     stroke-width="2"
+     stroke="black"
+     marker-end="url(#contains)"
+     d="M465,60 H495"
+     id="path30" />
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-FocusEvent"
+     target="_parent"
+     transform="translate(500, 50)"
+     class="order2"
+     id="FocusEvent">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       stroke-width="2"
+       id="rect33"
+       style="stroke:#000000;stroke-opacity:1" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       id="text35"
+       style="font-size:18px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:'Verdana, sans-serif'">FocusEvent</text>
+  </a>
+  <path
+     stroke-linejoin="round"
+     stroke-linecap="round"
+     fill="none"
+     stroke-width="2"
+     stroke="black"
+     marker-end="url(#contains)"
+     d="M465,60 H470 Q475,60 475,65 V85 Q475,90 480,90 H495"
+     id="path37" />
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-MouseEvent"
+     target="_parent"
+     transform="translate(500, 80)"
+     class="order2"
+     id="MouseEvent">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       stroke-width="2"
+       id="rect40"
+       style="stroke:#000000;stroke-opacity:1" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       text-anchor="middle"
+       font-family="Verdana, sans-serif"
+       id="text42"
+       style="fill:#000000;fill-opacity:1">MouseEvent</text>
+  </a>
+  <path
+     stroke-linejoin="round"
+     stroke-linecap="round"
+     fill="none"
+     stroke-width="2"
+     stroke="black"
+     marker-end="url(#contains)"
+     d="M705,90 H735"
+     id="path44" />
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-WheelEvent"
+     target="_parent"
+     transform="translate(740, 80)"
+     class="order3"
+     id="WheelEvent">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       stroke-width="2"
+       id="rect47"
+       style="stroke:#000000;stroke-opacity:1" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       text-anchor="middle"
+       font-family="Verdana, sans-serif"
+       id="text49"
+       style="fill:#000000;fill-opacity:1">WheelEvent</text>
+  </a>
+  <!--<path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
       d="M465,60 H470 Q475,60 475,65 V115 Q475,120 480,120 H495"/>
     <a id="TextEvent"  class="order2" transform="translate(500, 110)" xlink:href="../DOM3-Events.html#events-Events-TextEvent" target="_parent">
       <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
       <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">TextEvent</text>     
     </a>-->
-  
-    <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
-      d="M465,60 H470 Q475,60 475,65 V115 Q475,120 480,120 H495"/>
-    <a id="KeyboardEvent"  class="order2" transform="translate(500, 110)" xlink:href="../DOM3-Events.html#events-Events-KeyboardEvent" target="_parent">
-      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
-      <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">KeyboardEvent</text>     
-    </a>
-      
-    <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
-      d="M465,60 H470 Q475,60 475,65 V145 Q475,150 480,150 H495"/>
-    <a id="CompositionEvent"  class="order2" transform="translate(500, 140)" xlink:href="../DOM3-Events.html#events-Events-CompositionEvent" target="_parent">
-      <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
-      <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">CompositionEvent</text>     
-    </a>
-
-  <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
-    d="M225,60 H230 Q235,60 235,65 V175 Q235,180 240,180 H255"/>
-  <a id="CustomEvent"  class="order1" transform="translate(260, 170)" xlink:href="../DOM3-Events.html#interface-CustomEvent" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
-    <text x="100" y="16" font-size="18" fill="black" text-anchor="middle" font-family="Verdana, sans-serif">CustomEvent</text>     
+  <path
+     stroke-linejoin="round"
+     stroke-linecap="round"
+     fill="none"
+     stroke-width="2"
+     stroke="black"
+     marker-end="url(#contains)"
+     d="M465,60 H470 Q475,60 475,65 V115 Q475,120 480,120 H495"
+     id="path51" />
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-KeyboardEvent"
+     target="_parent"
+     transform="translate(500, 110)"
+     class="order2"
+     id="KeyboardEvent">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       stroke-width="2"
+       id="rect54"
+       style="stroke:#000000;stroke-opacity:1" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       id="text56"
+       style="font-size:18px;text-anchor:middle;fill:#000000;stroke:none;font-family:'Verdana, sans-serif';fill-opacity:1">InputEvent</text>
   </a>
-
-  <path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
-    d="M225,60 H230 Q235,60 235,65 V205 Q235,210 240,210 H255"/>
-  <a id="MutationEvent"  class="order1" transform="translate(260, 200)" xlink:href="../DOM3-Events.html#events-Events-MutationEvent" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
-    <text x="100" y="16" font-size="18" fill="black" text-anchor="middle" font-family="Verdana, sans-serif">MutationEvent</text>     
+  <path
+     stroke-linejoin="round"
+     stroke-linecap="round"
+     fill="none"
+     stroke-width="2"
+     stroke="black"
+     marker-end="url(#contains)"
+     d="M465,60 H470 Q475,60 475,65 V145 Q475,150 480,150 H495"
+     id="path58" />
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-CompositionEvent"
+     style="fill:#dcdcdc;stroke:#0000ff"
+     target="_parent"
+     transform="translate(500,170)"
+     class="order2"
+     id="CompositionEvent">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       id="rect61"
+       style="stroke-width:2;stroke:#000000;stroke-opacity:1" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       id="text63"
+       style="font-size:18px;text-anchor:middle;fill:#000000;stroke:none;font-family:'Verdana, sans-serif';fill-opacity:1">CompositionEvent</text>
   </a>
-
-    <!--<path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
+  <a
+     xlink:href="../DOM3-Events.html#interface-CustomEvent"
+     style="fill:#009300;fill-opacity:1;stroke:#808080;stroke-opacity:1"
+     target="_parent"
+     transform="translate(260,200)"
+     class="order1"
+     id="CustomEvent">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       id="rect68"
+       style="fill:#000000;fill-opacity:1;stroke:#808080;stroke-width:2;stroke-opacity:1" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       id="text70"
+       style="font-size:18px;text-anchor:middle;fill:#009300;fill-opacity:1;stroke:none;font-family:'Verdana, sans-serif'">
+      <tspan
+         style="fill:#ffffff;fill-opacity:1;stroke:none"
+         id="tspan3862">CustomEvent</tspan>
+    </text>
+  </a>
+  <!--<path stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-width="2"  stroke="black" marker-end="url(#contains)"
       d="M465,210 H495"/>
     <a id="MutationNameEvent"  class="order2" transform="translate(500, 200)" xlink:href="../DOM3-Events.html#events-Events-MutationNameEvent" target="_parent">
       <rect x="0" y="0" width="200" height="20" rx="5" ry="5" stroke-width="2"/>
       <text x="100" y="16" font-size="18" text-anchor="middle" font-family="Verdana, sans-serif">MutationNameEvent</text>     
     </a>-->
-
-
-  <a id="EventTarget"  class="basic" transform="translate(20, 80)" xlink:href="../DOM3-Events.html#events-Events-EventTarget" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="black" stroke="gray" stroke-width="2"/>
-    <text x="100" y="16" font-size="18" fill="white" text-anchor="middle" font-family="Verdana, sans-serif">EventTarget</text>     
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-EventTarget"
+     target="_parent"
+     transform="translate(20, 80)"
+     class="basic"
+     id="EventTarget">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       fill="black"
+       stroke="gray"
+       stroke-width="2"
+       id="rect80" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       fill="white"
+       text-anchor="middle"
+       font-family="Verdana, sans-serif"
+       id="text82">EventTarget</text>
   </a>
-
-  <a id="EventListener"  class="basic" transform="translate(20, 110)" xlink:href="../DOM3-Events.html#events-Events-EventListener" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="black" stroke="gray" stroke-width="2"/>
-    <text x="100" y="16" font-size="18" fill="white" text-anchor="middle" font-family="Verdana, sans-serif">EventListener</text>     
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-EventListener"
+     target="_parent"
+     transform="translate(20, 110)"
+     class="basic"
+     id="EventListener">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       fill="black"
+       stroke="gray"
+       stroke-width="2"
+       id="rect85" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       fill="white"
+       text-anchor="middle"
+       font-family="Verdana, sans-serif"
+       id="text87">EventListener</text>
   </a>
-
-  <a id="DocumentEvent"  class="basic" transform="translate(20, 140)" xlink:href="../DOM3-Events.html#events-Events-DocumentEvent" target="_parent">
-    <rect x="0" y="0" width="200" height="20" rx="5" ry="5" fill="black" stroke="gray" stroke-width="2"/>
-    <text x="100" y="16" font-size="18" fill="white" text-anchor="middle" font-family="Verdana, sans-serif">DocumentEvent</text>     
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-DocumentEvent"
+     target="_parent"
+     transform="translate(20, 140)"
+     class="basic"
+     id="DocumentEvent">
+    <rect
+       x="0"
+       y="0"
+       width="200"
+       height="20"
+       rx="5"
+       ry="5"
+       fill="black"
+       stroke="gray"
+       stroke-width="2"
+       id="rect90" />
+    <text
+       x="100"
+       y="16"
+       font-size="18"
+       fill="white"
+       text-anchor="middle"
+       font-family="Verdana, sans-serif"
+       id="text92">DocumentEvent</text>
   </a>
-
-  
+  <a
+     xlink:href="../DOM3-Events.html#events-Events-KeyboardEvent"
+     style="fill:#dcdcdc;stroke:#0000ff"
+     id="a3864"
+     class="order2"
+     transform="translate(500,140)"
+     target="_parent">
+    <rect
+       id="rect3866"
+       ry="5"
+       rx="5"
+       height="20"
+       width="200"
+       y="0"
+       x="0"
+       style="stroke-width:2;stroke:#000000;stroke-opacity:1" />
+    <text
+       id="text3868"
+       font-size="18"
+       y="16"
+       x="100"
+       style="font-size:18px;text-anchor:middle;fill:#000000;stroke:none;font-family:'Verdana, sans-serif';fill-opacity:1">KeyboardEvent</text>
+  </a>
+  <path
+     id="path3888"
+     d="m 465,60 h 5 q 5,0 5,5 v 110 q 0,5 5,5 h 15"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#contains)" />
+  <path
+     style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;marker-end:url(#contains)"
+     inkscape:connector-curvature="0"
+     d="m 230,60 c 3.33333,0 5,1.666667 5,5 l 0,140 c 0,3.33333 1.66667,5 5,5 l 15,0"
+     id="path3890"
+     sodipodi:nodetypes="csssc" />
 </svg>