1 line
13 KiB
XML
1 line
13 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 935"><defs><style>.a,.i{font-size:36px;}.a,.az,.m,.p,.q{font-family:INGMe, ING Me;}.b{letter-spacing:-0.01em;}.c{letter-spacing:0em;}.d{letter-spacing:-0.07em;}.e{font-size:19px;}.f{letter-spacing:-0.01em;}.g{letter-spacing:0em;}.h{letter-spacing:-0.02em;}.aa,.as,.au,.av,.i,.x{font-family:INGMe-Bold, ING Me;font-weight:700;}.j{letter-spacing:-0.06em;}.k{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:3px;}.l{opacity:0.4;}.m,.p,.q{font-size:26px;}.as,.av,.m,.u,.v{fill:#0071bc;}.n{letter-spacing:-0.01em;}.aa,.av,.o,.v{opacity:0.65;}.p,.t{fill:#22b573;}.q,.w{fill:#f7931e;}.r{letter-spacing:0em;}.s{letter-spacing:0em;}.aa,.as,.av,.az,.x{font-size:20px;}.y{letter-spacing:-0.03em;}.z{letter-spacing:0.02em;}.ab{letter-spacing:-0.02em;}.ac{letter-spacing:-0.01em;}.ad{letter-spacing:-0.01em;}.ae{fill:#4d4d4d;}.af,.aj{letter-spacing:-0.06em;}.af,.ag,.ah,.ai{fill:#000;}.ah,.am{letter-spacing:-0.01em;}.ai,.al{letter-spacing:0em;}.ak{letter-spacing:-0.02em;}.an{letter-spacing:-0.02em;}.ao{letter-spacing:-0.01em;}.ap{letter-spacing:-0.02em;}.aq{letter-spacing:0em;}.ar{letter-spacing:-0.05em;}.at{letter-spacing:0.02em;}.au{font-size:28px;fill:#fff;}.aw{letter-spacing:-0.01em;}.ax{letter-spacing:0em;}.ay{letter-spacing:-0.01em;}.ba{letter-spacing:-0.04em;}.bb{letter-spacing:0em;}.bc{letter-spacing:-0.1em;}</style></defs><title>FormatMixinDiagram1</title><text class="a" transform="translate(556.64 779.87)"><tspan class="b">f</tspan><tspan x="11.23" y="0">ormat</tspan><tspan class="c" x="111.17" y="0">t</tspan><tspan x="124.16" y="0">ed</tspan><tspan class="d" x="164.45" y="0">V</tspan><tspan x="183.99" y="0">alue</tspan></text><text class="a" transform="translate(636.8 205.87)">User<tspan class="e"><tspan x="-51.2" y="22.8">(input</tspan><tspan class="f" x="-1.16" y="22.8">E</tspan><tspan class="g" x="8.8" y="22.8">lement.input)</tspan></tspan></text><text class="a" transform="translate(630.17 399.87)"><tspan class="h">v</tspan><tspan x="16.92" y="0">alue</tspan></text><text class="i" transform="translate(575.11 586.87)">model<tspan class="j" x="103.86" y="0">V</tspan><tspan x="124.49" y="0">alue</tspan></text><text class="a" transform="translate(147.03 586.87)">seriali<tspan class="b" x="93.63" y="0">z</tspan><tspan x="109.37" y="0">ed</tspan><tspan class="d" x="149.65" y="0">V</tspan><tspan x="169.2" y="0">alue</tspan></text><line class="k" x1="673.5" y1="331.09" x2="673.5" y2="257.5"/><polygon points="684.61 322.67 673.5 327.38 662.39 322.67 673.5 349 684.61 322.67"/><line class="k" x1="703.5" y1="349" x2="703.5" y2="275.41"/><polygon points="714.61 283.83 703.5 279.12 692.39 283.83 703.5 257.5 714.61 283.83"/><line class="k" x1="673.5" y1="510.09" x2="673.5" y2="436.5"/><polygon points="684.61 501.67 673.5 506.38 662.39 501.67 673.5 528 684.61 501.67"/><line class="k" x1="671.5" y1="703.09" x2="671.5" y2="629.5"/><polygon points="682.61 694.66 671.5 699.38 660.39 694.66 671.5 721 682.61 694.66"/><path class="k" d="M587,617S442.29,766.44,289,629.32"/><polygon points="302.81 626.92 291.76 631.79 287.61 643.12 276 617 302.81 626.92"/><path class="k" d="M763.09,396.24c71.84,31,340.21,166.78,60.41,365.26"/><polygon points="766.61 409.82 766.48 397.75 775.08 389.28 746.5 389.5 766.61 409.82"/><g class="l"><path class="k" d="M276,528.22s144.71-149.44,298-12.31"/><polygon points="560.19 518.31 571.24 513.43 575.39 502.1 587 528.22 560.19 518.31"/></g><text class="m" transform="translate(683.78 481.9)">parser</text><text class="m" transform="translate(372.78 720.9)">seriali<tspan class="n" x="67.62" y="0">z</tspan><tspan x="78.99" y="0">er</tspan></text><g class="o"><text class="m" transform="translate(372.78 444.9)">deseriali<tspan class="n" x="96.72" y="0">z</tspan><tspan x="108.08" y="0">er</tspan></text></g><text class="p" transform="translate(609.78 294.9)">sync</text><text class="q" transform="translate(934.78 735.9)">on-blur</text><text class="p" transform="translate(720.78 294.9)">delega<tspan class="r" x="78.7" y="0">t</tspan><tspan x="88.09" y="0">e</tspan></text><text class="p" transform="translate(901.78 470.9)">sync</text><text class="m" transform="translate(683.78 661.9)"><tspan class="n">f</tspan><tspan x="8.11" y="0">ormat</tspan><tspan class="r" x="80.29" y="0">t</tspan><tspan class="s" x="89.67" y="0">er</tspan></text><circle class="t" cx="583" cy="295" r="16.97"/><circle class="t" cx="846" cy="295" r="16.97"/><circle class="u" cx="705.5" cy="434.5" r="16.97"/><circle class="v" cx="347.5" cy="412.5" r="16.97"/><circle class="u" cx="347.5" cy="725.5" r="16.97"/><circle class="u" cx="705.5" cy="687.5" r="16.97"/><circle class="w" cx="910" cy="730" r="16.97"/><text class="x" transform="translate(904.08 737.25)">5</text><text class="q" transform="translate(558.78 168.9)">in<tspan class="r" x="21.09" y="0">t</tspan><tspan x="30.47" y="0">e</tspan><tspan class="y" x="44.62" y="0">r</tspan><tspan x="53.07" y="0">a</tspan><tspan class="z" x="67.75" y="0">c</tspan><tspan x="80.78" y="0">t</tspan></text><circle class="w" cx="534" cy="163" r="16.97"/><text class="x" transform="translate(528.08 169.25)">1</text><text class="x" transform="translate(577.08 302.25)">2</text><text class="x" transform="translate(699.08 442.25)">3</text><text class="x" transform="translate(699.08 694.25)">4</text><text class="x" transform="translate(341.08 732.25)">4</text><text class="aa" transform="translate(342.08 419.25)">5</text><text class="x" transform="translate(840.08 302.25)">7</text><circle class="t" cx="885" cy="434" r="16.97"/><text class="x" transform="translate(879.08 441.25)">6</text><text class="x" transform="translate(1093.03 205.75)"><tspan xml:space="preserve">1. User changes the input </tspan><tspan x="0" y="96">2. Nati</tspan><tspan class="ab" x="60.28" y="96">v</tspan><tspan x="70.24" y="96">e input syncs </tspan><tspan x="0" y="120" xml:space="preserve"> with lion-input-da</tspan><tspan class="ac" x="185.88" y="120">t</tspan><tspan x="193.9" y="120">e </tspan><tspan class="ad" x="209.78" y="120">v</tspan><tspan x="219.74" y="120">alue </tspan><tspan class="ae"><tspan x="0" y="192">3. </tspan><tspan class="af" x="21.26" y="192">V</tspan><tspan class="ag" x="32.72" y="192">alue is parsed </tspan><tspan class="ah" x="164.5" y="192">t</tspan><tspan class="ag" x="172.52" y="192">o model</tspan><tspan class="af" x="246.42" y="192">V</tspan><tspan class="ai" x="257.88" y="192">alue</tspan></tspan><tspan x="0" y="288">4. model</tspan><tspan class="aj" x="78.96" y="288">V</tspan><tspan x="90.42" y="288">alue is </tspan><tspan class="ak" x="154.56" y="288">f</tspan><tspan class="al" x="161.7" y="288">ormat</tspan><tspan class="am" x="218.38" y="288">t</tspan><tspan x="226.4" y="288">ed </tspan><tspan class="ac" x="254" y="288">t</tspan><tspan class="al" x="262.02" y="288">o </tspan><tspan x="0" y="312" xml:space="preserve"> </tspan><tspan class="an" x="19.2" y="312">f</tspan><tspan x="26.34" y="312">ormat</tspan><tspan class="ac" x="83.02" y="312">t</tspan><tspan x="91.04" y="312">ed</tspan><tspan class="aj" x="113.84" y="312">V</tspan><tspan class="al" x="125.3" y="312">alue and </tspan><tspan x="0" y="336" xml:space="preserve"> model</tspan><tspan class="aj" x="76.9" y="336">V</tspan><tspan x="88.36" y="336">alue is seriali</tspan><tspan class="ac" x="208.26" y="336">z</tspan><tspan x="217.04" y="336">ed </tspan><tspan class="am" x="244.63" y="336">t</tspan><tspan x="252.66" y="336">o</tspan><tspan x="0" y="360" xml:space="preserve"> seriali</tspan><tspan class="ac" x="74.96" y="360">z</tspan><tspan x="83.74" y="360">ed</tspan><tspan class="aj" x="106.54" y="360">V</tspan><tspan class="al" x="118" y="360">alue</tspan><tspan x="0" y="384" xml:space="preserve"> </tspan><tspan x="0" y="432">5. User blurs the field.</tspan><tspan x="0" y="456" xml:space="preserve"> Input gets </tspan><tspan class="ab" x="117.68" y="456">v</tspan><tspan x="127.64" y="456">alida</tspan><tspan class="ac" x="173.32" y="456">t</tspan><tspan x="181.34" y="456">ed by</tspan><tspan x="0" y="480" xml:space="preserve"> </tspan><tspan class="aj" x="19.2" y="480">V</tspan><tspan x="30.66" y="480">alida</tspan><tspan class="ac" x="76.34" y="480">t</tspan><tspan x="84.36" y="480">eMixin</tspan><tspan x="0" y="528">6. </tspan><tspan class="ak" x="21.26" y="528">f</tspan><tspan class="al" x="28.4" y="528">ormat</tspan><tspan class="ac" x="85.08" y="528">t</tspan><tspan x="93.1" y="528">ed</tspan><tspan class="aj" x="115.9" y="528">V</tspan><tspan x="127.36" y="528">alue syn</tspan><tspan class="ao" x="204.72" y="528">c</tspan><tspan x="214.52" y="528">ed</tspan><tspan x="0" y="552" xml:space="preserve"> back </tspan><tspan class="ac" x="67.2" y="552">t</tspan><tspan class="al" x="75.22" y="552">o the </tspan><tspan class="ad" x="127.16" y="552">v</tspan><tspan x="137.12" y="552">alue</tspan><tspan x="0" y="576" xml:space="preserve"> (p</tspan><tspan class="ap" x="37.44" y="576">r</tspan><tspan class="ad" x="44.56" y="576">ev</tspan><tspan class="aq" x="65.3" y="576">ent</tspan><tspan class="an" x="96.26" y="576">R</tspan><tspan class="aq" x="107.86" y="576">ecursi</tspan><tspan class="ad" x="162.8" y="576">v</tspan><tspan class="aq" x="172.76" y="576">e</tspan><tspan class="ar" x="183.84" y="576">T</tspan><tspan x="193.54" y="576">rigger</tspan><tspan x="0" y="600" xml:space="preserve"> p</tspan><tspan class="ap" x="35.48" y="600">r</tspan><tspan class="ad" x="42.6" y="600">ev</tspan><tspan x="63.34" y="600">ents infini</tspan><tspan class="ac" x="155.02" y="600">t</tspan><tspan x="163.04" y="600">e looping)</tspan><tspan x="0" y="648">7. </tspan><tspan class="aj" x="21.26" y="648">V</tspan><tspan x="32.72" y="648">alue is delega</tspan><tspan class="ac" x="159.36" y="648">t</tspan><tspan x="167.38" y="648">ed back </tspan><tspan class="ac" x="242.98" y="648">t</tspan><tspan class="al" x="251" y="648">o </tspan><tspan x="0" y="672" xml:space="preserve"> nati</tspan><tspan class="ab" x="55.92" y="672">v</tspan><tspan x="65.88" y="672">e input </tspan><tspan class="ad" x="134.86" y="672">v</tspan><tspan x="144.82" y="672">alue </tspan><tspan x="0" y="696" xml:space="preserve"> (what the user sees)</tspan></text><text class="as" transform="translate(1462.03 205.75)"><tspan xml:space="preserve"> “10/30/2010”</tspan><tspan x="0" y="96">“10/30/2010”</tspan><tspan x="0" y="192">[Da</tspan><tspan class="ac" x="31.54" y="192">t</tspan><tspan x="39.56" y="192">eO</tspan><tspan class="ao" x="64.62" y="192">b</tspan><tspan x="75.88" y="192">je</tspan><tspan class="at" x="92.44" y="192">c</tspan><tspan x="102.72" y="192">t] </tspan><tspan x="0" y="288">“30-10-2010”</tspan><tspan x="0" y="336">“2010-10-30T00:00:00.000Z”</tspan><tspan x="0" y="432">“30-10-2010”</tspan><tspan x="0" y="528">“30-10-2010”</tspan><tspan x="0" y="648">“30-10-2010”</tspan></text><text class="x" transform="translate(1659.03 205.75)"> <tspan class="ae" x="4.8" y="0" xml:space="preserve">@user-input-changed </tspan><tspan x="0" y="96"> </tspan><tspan class="ae"><tspan x="0" y="192">@model-</tspan><tspan class="ab" x="81.98" y="192">v</tspan><tspan class="al" x="91.94" y="192" xml:space="preserve">alue-changed </tspan><tspan x="0" y="264" xml:space="preserve"> </tspan></tspan></text><text class="au" transform="translate(1368.5 683.5)">!</text><text class="av" transform="translate(184 348.55)"><tspan xml:space="preserve"> [Da</tspan><tspan class="aw" x="55.54" y="0">t</tspan><tspan x="63.56" y="0">eO</tspan><tspan class="ao" x="88.62" y="0">b</tspan><tspan class="ax" x="99.88" y="0">je</tspan><tspan class="at" x="116.44" y="0">c</tspan><tspan x="126.72" y="0">t]</tspan></text><text class="aa" transform="translate(128 294.55)">5. On <tspan class="ap" x="51.74" y="0">r</tspan><tspan x="58.86" y="0">equest: seriali</tspan><tspan class="ac" x="187.02" y="0">z</tspan><tspan x="195.8" y="0">ed</tspan><tspan class="aj" x="218.6" y="0">V</tspan><tspan x="230.06" y="0">alue is </tspan><tspan x="0" y="24" xml:space="preserve"> deseriali</tspan><tspan class="aw" x="97.76" y="24">z</tspan><tspan x="106.54" y="24">ed </tspan><tspan class="ac" x="134.14" y="24">t</tspan><tspan x="142.16" y="24">o model</tspan><tspan class="aj" x="216.06" y="24">V</tspan><tspan x="227.52" y="24">alue</tspan></text><text class="i" transform="translate(917.42 119.68)">User fl<tspan class="ay" x="107.13" y="0">o</tspan><tspan x="127.44" y="0">w</tspan></text><text class="az" transform="translate(935.9 761.14)">check<tspan x="-116.33" y="24">has</tspan><tspan class="ba" x="-84.41" y="24">F</tspan><tspan x="-75.75" y="24">eedback</tspan><tspan class="ba" x="-0.67" y="24">F</tspan><tspan class="bb" x="7.99" y="24">o</tspan><tspan class="bc" x="19.33" y="24">r</tspan><tspan class="ax" x="24.47" y="24">.includes('er</tspan><tspan class="y" x="131.83" y="24">r</tspan><tspan class="bb" x="138.33" y="24">or')</tspan></text></svg>
|