Binary file source/images/eventflow.png has changed
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/source/images/eventflow.svg Mon Mar 27 20:46:11 2006 +0900
@@ -0,0 +1,221 @@
+<?xml version="1.0" encoding='iso-8859-1'?>
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="480" viewBox="0 -10 480 560" height="560" font-family=""sansserif",sans-serif" xmlns="http://www.w3.org/2000/svg" font-size="14pt">
+ <defs>
+ <filter x="0" y="0" width="120%" xmlns:xlink="http://www.w3.org/1999/xlink" height="120%" id="dropShadow">
+ <feGaussianBlur stdDeviation="2 2" in="SourceAlpha"/>
+ <feOffset dx="2" dy="2"/>
+ <feComponentTransfer result="shadow">
+ <feFuncA type="linear" slope=".25" intercept="0"/>
+ </feComponentTransfer>
+ <feMerge>
+ <feMergeNode/>
+ <feMergeNode in="SourceGraphic"/>
+ </feMerge>
+ </filter>
+
+ <marker refX="4" refY="1.5" orient="auto" id="arrowHead" markerHeight="9" viewBox="0 0 4 3" markerWidth="12">
+ <path fill="black" d="M 0 0 L 4 1.4 L 0 3 Z" stroke="none"/>
+ </marker>
+ <marker refX="0" refY="5" orient="auto" markerHeight="6" id="arrowHeadCapture" viewBox="0 0 15 10" markerWidth="8">
+ <path fill="red" d="M 0 0 L 15 5 L 0 10 Z"/>
+ </marker>
+ <marker refX="0" refY="5" orient="auto" markerHeight="6" id="arrowHeadBubbling" viewBox="0 0 15 10" markerWidth="8">
+ <path fill="green" d="M 0 0 L 15 5 L 0 10 Z"/>
+ </marker>
+
+ <marker refX="0" refY="5" orient="auto" markerHeight="6" id="arrowHeadCapture2" viewBox="0 0 15 10" markerWidth="8">
+ <path stroke-dasharray='2,1' stroke='red' fill="none" d="M 0 0 L 15 5 L 0 10 Z"/>
+ </marker>
+ <marker refX="0" refY="5" orient="auto" markerHeight="6" id="arrowHeadBubbling2" viewBox="0 0 15 10" markerWidth="8">
+ <path fill="green" d="M 0 0 L 15 5 L 0 10 Z"/>
+ </marker>
+
+ </defs>
+
+ <rect x="-50%" y="-50%" fill="rgb(255, 255, 255)" width="200%" height="200%" stroke="black"/>
+
+ <g transform="translate(50, 150)">
+ <text x="50" y="12" text-anchor="middle" fill="red" class="label" stroke="none">capture</text>
+ <text x="50" y="30" text-anchor="middle" fill="red" class="label" stroke="none">phase</text>
+ <text x="50" y="48" text-anchor="middle" fill="red" class="label" stroke="none">(1)</text>
+ </g>
+ <g transform="translate(350, 150)">
+ <text x="50" y="12" text-anchor="middle" fill="green" class="label" stroke="none">bubbling</text>
+ <text x="50" y="30" text-anchor="middle" fill="green" class="label" stroke="none">phase</text>
+ <text x="50" y="48" text-anchor="middle" fill="green" class="label" stroke="none">(3)</text>
+ </g>
+
+ <g transform="translate(190, 370)">
+ <text x="50" y="12" text-anchor="middle" fill="blue" class="label" stroke="none">target</text>
+ <text x="50" y="30" text-anchor="middle" fill="blue" class="label" stroke="none">phase</text>
+ <text x="50" y="48" text-anchor="middle" fill="blue" class="label" stroke="none">(2)</text>
+ </g>
+
+ <g transform="translate(150, 0)">
+ <line fill="none" x1="0" x2="0" y1="30" y2="60" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
+ <line fill="none" x1="0" x2="0" y1="100" y2="130" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
+ <line fill="none" x1="0" x2="0" y1="170" y2="200" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
+ <line fill="none" x1="0" x2="0" y1="240" y2="270" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
+ </g>
+ <g transform="translate(250, 335)">
+ <g transform="rotate(-73)">
+ <line fill="none" x1="0" x2="0" y1="0" y2="30" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture)"/>
+ </g>
+ </g>
+ <g transform="translate(320, 395)">
+ <g transform="rotate(65)">
+ <line fill="none" x1="0" x2="0" y1="0" y2="30" class="arrowLinksCapture" stroke="red" stroke-width="3" marker-end="url(#arrowHeadCapture2)"/>
+ </g>
+ </g>
+ <g transform="translate(330, 20)">
+ <line fill="none" x1="0" x2="0" y1="60" y2="30" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
+ <line fill="none" x1="0" x2="0" y1="130" y2="100" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
+ <line fill="none" x1="0" x2="0" y1="200" y2="170" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
+ <line fill="none" x1="0" x2="0" y1="270" y2="240" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
+ </g>
+ <g transform="translate(350, 320)">
+ <g transform="rotate(-73)">
+ <line fill="none" x1="0" x2="0" y1="30" y2="0" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling)"/>
+ </g>
+ </g>
+ <g transform="translate(350, 406)">
+ <g transform="rotate(65)">
+ <line stroke-dasharray="2,2" fill="none" x1="0" x2="0" y1="30" y2="0" class="arrowLinksBubbling" stroke="green" stroke-width="3" marker-end="url(#arrowHeadBubbling2)"/>
+ </g>
+ </g>
+ <g transform="translate(180, 0)">
+ <g filter="url(#dropShadow)">
+ <line fill="none" x1="60" x2="60" y1="40" y2="70" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <path fill="none" id="Baudelaire" d="M 0 0 L 120 0 L 120 40 L 0 40 z" stroke="black" stroke-width="0.5"/>
+ <text x="60" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none">Document</text>
+ <text fill="blue" font-size="2.1pt">
+ <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Baudelaire">
+Je t'adore à l'égal de la voûte nocturne,
+O vase de tristesse, ô grande taciturne,
+Et t'aime d'autant plus, belle, que tu me fuis,
+Et que tu me parais, ornement de mes nuits,
+Plus ironiquement accumuler les lieues
+Qui séparent mes bras des immensités bleues.
+-- XXIV <!-- Charles Baudelaire -->
+ </textPath>
+ </text>
+ </g>
+
+ <g transform="translate(10, 70)" filter="url(#dropShadow)">
+ <line fill="none" x1="50" x2="50" y1="40" y2="70" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <rect id='t2' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><html></text>
+ </g>
+
+ <g transform="translate(10, 140)" filter="url(#dropShadow)">
+ <line fill="none" x1="50" x2="50" y1="40" y2="70" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <rect id='t3' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><body></text>
+ </g>
+
+ <g transform="translate(10, 210)" filter="url(#dropShadow)">
+ <line fill="none" x1="50" x2="50" y1="40" y2="70" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <rect id='t4' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><table></text>
+ </g>
+
+ <g transform="translate(10, 280)" filter="url(#dropShadow)">
+ <rect id='t5' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><tbody></text>
+ </g>
+ </g>
+
+ <g transform="translate(0, 350)">
+ <g filter="url(#dropShadow)">
+ <line fill="none" x1="240" x2="120" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <line fill="none" x1="240" x2="360" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ </g>
+ <g transform="translate(70, 0)" filter="url(#dropShadow)">
+ <rect x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><tr></text>
+ </g>
+ <g transform="translate(310, 0)" filter="url(#dropShadow)">
+ <rect id='t6' x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><tr></text>
+ </g>
+ </g>
+
+ <g transform="translate(0, 420)">
+ <g filter="url(#dropShadow)">
+ <line fill="none" x1="120" x2="60" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <line fill="none" x1="120" x2="180" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <line fill="none" x1="360" x2="300" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <line fill="none" x1="360" x2="420" y1="-30" y2="0" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ </g>
+ <g transform="translate(10, 0)" filter="url(#dropShadow)">
+ <line fill="none" x1="50" x2="50" y1="40" y2="60" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <rect x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><td></text>
+ </g>
+ <g transform="translate(130, 0)" filter="url(#dropShadow)">
+ <line fill="none" x1="50" x2="50" y1="40" y2="60" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <rect x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><td></text>
+ </g>
+
+ <a xlink:href='#c0' xlink:type='simple'>
+ <g transform="translate(250, 0)" filter="url(#dropShadow)">
+ <line fill="none" x1="50" x2="50" y1="40" y2="60" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <rect id='t7' x="0" y="0" fill="blue" width="100" height="40" stroke="black"/>
+ <text id='t72' x="50" y="26.5" text-anchor="middle" fill="white" class="label" stroke="none"><td></text>
+ </g>
+ </a>
+
+ <g transform="translate(370, 0)" filter="url(#dropShadow)">
+ <line fill="none" x1="50" x2="50" y1="40" y2="60" class="arrowLinks" stroke="black" marker-end="url(#arrowHead)"/>
+ <rect x="0" y="0" fill="white" width="100" height="40" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none"><td></text>
+ </g>
+ </g>
+
+ <g font-size="12pt" transform="translate(0, 490)">
+ <g transform="translate(10, 0)" filter="url(#dropShadow)">
+ <ellipse fill="white" rx="55" cx="50" ry="30" cy="20" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none">Shady Grove</text>
+ </g>
+ <g transform="translate(130, 0)" filter="url(#dropShadow)">
+ <ellipse fill="white" rx="55" cx="50" ry="30" cy="20" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none">Aeolian</text>
+ </g>
+ <g transform="translate(250, 0)" filter="url(#dropShadow)">
+ <ellipse fill="white" rx="60" cx="50" ry="30" cy="20" stroke="black"/>
+ <text x="50" y="22.5" text-anchor="middle" fill="black" class="label" stroke="none">Over the river,</text>
+ <text x="50" y="38.5" text-anchor="middle" fill="black" class="label" stroke="none">Charlie</text>
+ </g>
+ <g transform="translate(370, 0)" filter="url(#dropShadow)">
+ <ellipse fill="white" rx="55" cx="50" ry="30" cy="20" stroke="black"/>
+ <text x="50" y="26.5" text-anchor="middle" fill="black" class="label" stroke="none">Dorian</text>
+ </g>
+ </g>
+
+ <!-- setup -->
+ <animateColor id='c0' xlink:href='#t7' begin='indefinite' attributeName='fill' from='white' to='white' end='b0.end' />
+ <animateColor id='c02' xlink:href='#t72' begin='c0.begin' attributeName='fill' from='black' to='black' end='b0.end' />
+
+ <!-- capture -->
+ <animateColor keyTimes='0;0.3;1' id='c1' xlink:href='#Baudelaire' begin='c0.begin' attributeName='fill' values='white;red;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='c2' xlink:href='#t2' begin='c1.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='c3' xlink:href='#t3' begin='c2.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='c4' xlink:href='#t4' begin='c3.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='c5' xlink:href='#t5' begin='c4.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='c6' xlink:href='#t6' begin='c5.end - 4.0' attributeName='fill' values='white;red;white' dur='5s' />
+
+ <!-- target -->
+ <animateColor keyTimes='0;0.3;1' id='c7' xlink:href='#t7' begin='c6.end - 4.0' attributeName='fill' values='white;blue;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='c72' xlink:href='#t72' begin='c6.end - 4.0' attributeName='fill' values='black;white;black' dur='5s' />
+
+ <!-- bubble -->
+ <animateColor keyTimes='0;0.3;1' id='b6' xlink:href='#t6' begin='c7.end - 1.0' attributeName='fill' values='white;green;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='b5' xlink:href='#t5' begin='b6.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='b4' xlink:href='#t4' begin='b5.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='b3' xlink:href='#t3' begin='b4.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='b2' xlink:href='#t2' begin='b3.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='b1' xlink:href='#t1' begin='b2.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
+ <animateColor keyTimes='0;0.3;1' id='b0' xlink:href='#Baudelaire' begin='b1.end - 4.0' attributeName='fill' values='white;green;white' dur='5s' />
+
+</svg>