all repos — h3 @ 9fa8fbf627eecea4cb8bb8fa50855ea33948ca96

A tiny, extremely minimalist JavaScript microframework.

docs/images/h3.sequence.svg

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="880px" preserveAspectRatio="none" style="width:790px;height:880px;" version="1.1" viewBox="0 0 790 880" width="790px" zoomAndPan="magnify"><defs><filter height="300%" id="f1dbhycfy50ozh" width="300%" x="-1" y="-1"><feGaussianBlur result="blurOut" stdDeviation="2.0"/><feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/><feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/><feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/></filter></defs><g><text fill="#000000" font-family="sans-serif" font-size="18" lengthAdjust="spacingAndGlyphs" textLength="205" x="291.75" y="26.708">H3 Sequence Diagram</text><rect fill="#FFFFFF" filter="url(#f1dbhycfy50ozh)" height="104.5313" style="stroke: #000000; stroke-width: 2.0;" width="509" x="183.5" y="450.7109"/><rect fill="#FFFFFF" filter="url(#f1dbhycfy50ozh)" height="221.0625" style="stroke: #000000; stroke-width: 2.0;" width="679.5" x="13" y="569.2422"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="67" x2="67" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="239.5" x2="239.5" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="383.5" x2="383.5" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="496" x2="496" y1="100.25" y2="807.3047"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 5.0,5.0;" x1="659.5" x2="659.5" y1="100.25" y2="807.3047"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="83" x="23" y="96.9482">Application</text><ellipse cx="67.5" cy="67.9531" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="55.5" x2="79.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="83" x="23" y="819.2998">Application</text><ellipse cx="67.5" cy="838.6016" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="55.5" x2="79.5" y1="852.6016" y2="852.6016"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="86" x="193.5" y="96.9482">Component</text><ellipse cx="239.5" cy="67.9531" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><polygon fill="#A80036" points="235.5,55.9531,241.5,50.9531,239.5,55.9531,241.5,60.9531,235.5,55.9531" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="86" x="193.5" y="819.2998">Component</text><ellipse cx="239.5" cy="838.6016" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><polygon fill="#A80036" points="235.5,826.6016,241.5,821.6016,239.5,826.6016,241.5,831.6016,235.5,826.6016" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="19" x="371" y="96.9482">H3</text><ellipse cx="383.5" cy="67.9531" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="371.5" x2="395.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="19" x="371" y="819.2998">H3</text><ellipse cx="383.5" cy="838.6016" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="371.5" x2="395.5" y1="852.6016" y2="852.6016"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="49" x="469" y="96.9482">Router</text><ellipse cx="496.5" cy="67.9531" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="484.5" x2="508.5" y1="81.9531" y2="81.9531"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="49" x="469" y="819.2998">Router</text><ellipse cx="496.5" cy="838.6016" fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" rx="12" ry="12" style="stroke: #A80036; stroke-width: 2.0;"/><line style="stroke: #A80036; stroke-width: 2.0;" x1="484.5" x2="508.5" y1="852.6016" y2="852.6016"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="40" x="636.5" y="96.9482">Store</text><path d="M641.5,47.9531 C641.5,37.9531 659.5,37.9531 659.5,37.9531 C659.5,37.9531 677.5,37.9531 677.5,47.9531 L677.5,73.9531 C677.5,83.9531 659.5,83.9531 659.5,83.9531 C659.5,83.9531 641.5,83.9531 641.5,73.9531 L641.5,47.9531 " fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" style="stroke: #000000; stroke-width: 1.5;"/><path d="M641.5,47.9531 C641.5,57.9531 659.5,57.9531 659.5,57.9531 C659.5,57.9531 677.5,57.9531 677.5,47.9531 " fill="none" style="stroke: #000000; stroke-width: 1.5;"/><text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacingAndGlyphs" textLength="40" x="636.5" y="819.2998">Store</text><path d="M641.5,832.6016 C641.5,822.6016 659.5,822.6016 659.5,822.6016 C659.5,822.6016 677.5,822.6016 677.5,832.6016 L677.5,858.6016 C677.5,868.6016 659.5,868.6016 659.5,868.6016 C659.5,868.6016 641.5,868.6016 641.5,858.6016 L641.5,832.6016 " fill="#FEFECE" filter="url(#f1dbhycfy50ozh)" style="stroke: #000000; stroke-width: 1.5;"/><path d="M641.5,832.6016 C641.5,842.6016 659.5,842.6016 659.5,842.6016 C659.5,842.6016 677.5,842.6016 677.5,832.6016 " fill="none" style="stroke: #000000; stroke-width: 1.5;"/><polygon fill="#A80036" points="371.5,127.3828,381.5,131.3828,371.5,135.3828,375.5,131.3828" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0; stroke-dasharray: 2.0,2.0;" x1="67.5" x2="377.5" y1="131.3828" y2="131.3828"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="59" x="74.5" y="126.3169">h3.init()</text><polygon fill="#A80036" points="647.5,156.5156,657.5,160.5156,647.5,164.5156,651.5,160.5156" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="653.5" y1="160.5156" y2="160.5156"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="56" x="390.5" y="155.4497">initialize</text><line style="stroke: #A80036; stroke-width: 1.0;" x1="659.5" x2="701.5" y1="189.6484" y2="189.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="701.5" x2="701.5" y1="189.6484" y2="202.6484"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="660.5" x2="701.5" y1="202.6484" y2="202.6484"/><polygon fill="#A80036" points="670.5,198.6484,660.5,202.6484,670.5,206.6484,666.5,202.6484" style="stroke: #A80036; stroke-width: 1.0;"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="112" x="666.5" y="184.5825">execute modules</text><polygon fill="#A80036" points="647.5,227.7813,657.5,231.7813,647.5,235.7813,651.5,231.7813" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="653.5" y1="231.7813" y2="231.7813"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="91" x="390.5" y="226.7153">dispatch($init)</text><polygon fill="#A80036" points="78.5,256.9141,68.5,260.9141,78.5,264.9141,74.5,260.9141" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="72.5" x2="382.5" y1="260.9141" y2="260.9141"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="62" x="84.5" y="255.8481">preStart()</text><polygon fill="#A80036" points="484.5,286.0469,494.5,290.0469,484.5,294.0469,488.5,290.0469" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="490.5" y1="290.0469" y2="290.0469"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="56" x="390.5" y="284.981">initialize</text><polygon fill="#A80036" points="484.5,315.1797,494.5,319.1797,484.5,323.1797,488.5,319.1797" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="490.5" y1="319.1797" y2="319.1797"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="40" x="390.5" y="314.1138">start()</text><polygon fill="#A80036" points="647.5,344.3125,657.5,348.3125,647.5,352.3125,651.5,348.3125" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="348.3125" y2="348.3125"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="139" x="503.5" y="343.2466">dispatch($navigation)</text><polygon fill="#A80036" points="250.5,373.4453,240.5,377.4453,250.5,381.4453,246.5,377.4453" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="495.5" y1="377.4453" y2="377.4453"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="52" x="256.5" y="372.3794">render()</text><polygon fill="#A80036" points="647.5,402.5781,657.5,406.5781,647.5,410.5781,651.5,406.5781" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="406.5781" y2="406.5781"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="503.5" y="401.5122">dispatch($redraw)</text><polygon fill="#A80036" points="78.5,431.7109,68.5,435.7109,78.5,439.7109,74.5,435.7109" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="72.5" x2="382.5" y1="435.7109" y2="435.7109"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="69" x="84.5" y="430.645">postStart()</text><path d="M183.5,450.7109 L281.5,450.7109 L281.5,457.7109 L271.5,467.7109 L183.5,467.7109 L183.5,450.7109 " fill="#EEEEEE" style="stroke: #000000; stroke-width: 1.0;"/><rect fill="none" height="104.5313" style="stroke: #000000; stroke-width: 2.0;" width="509" x="183.5" y="450.7109"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="53" x="198.5" y="463.7778">redraw</text><polygon fill="#A80036" points="371.5,484.9766,381.5,488.9766,371.5,492.9766,375.5,488.9766" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="239.5" x2="377.5" y1="488.9766" y2="488.9766"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="87" x="246.5" y="483.9106">h3.redraw()</text><polygon fill="#A80036" points="250.5,514.1094,240.5,518.1094,250.5,522.1094,246.5,518.1094" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="382.5" y1="518.1094" y2="518.1094"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="55" x="256.5" y="513.0435">redraw()</text><polygon fill="#A80036" points="647.5,543.2422,657.5,547.2422,647.5,551.2422,651.5,547.2422" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="653.5" y1="547.2422" y2="547.2422"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="390.5" y="542.1763">dispatch($redraw)</text><path d="M13,569.2422 L137,569.2422 L137,576.2422 L127,586.2422 L13,586.2422 L13,569.2422 " fill="#EEEEEE" style="stroke: #000000; stroke-width: 1.0;"/><rect fill="none" height="221.0625" style="stroke: #000000; stroke-width: 2.0;" width="679.5" x="13" y="569.2422"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="79" x="28" y="582.3091">navigation</text><polygon fill="#A80036" points="371.5,603.5078,381.5,607.5078,371.5,611.5078,375.5,607.5078" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="239.5" x2="377.5" y1="607.5078" y2="607.5078"/><text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacingAndGlyphs" textLength="120" x="246.5" y="602.4419">h3.navigateTo()</text><polygon fill="#A80036" points="484.5,632.6406,494.5,636.6406,484.5,640.6406,488.5,636.6406" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="383.5" x2="490.5" y1="636.6406" y2="636.6406"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="89" x="390.5" y="631.5747">processPath()</text><polygon fill="#A80036" points="647.5,661.7734,657.5,665.7734,647.5,669.7734,651.5,665.7734" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="665.7734" y2="665.7734"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="139" x="503.5" y="660.7075">dispatch($navigation)</text><polygon fill="#A80036" points="78.5,690.9063,68.5,694.9063,78.5,698.9063,74.5,694.9063" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="72.5" x2="495.5" y1="694.9063" y2="694.9063"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="148" x="84.5" y="689.8403">remove all DOM nodes</text><polygon fill="#A80036" points="227.5,720.0391,237.5,724.0391,227.5,728.0391,231.5,724.0391" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="67.5" x2="233.5" y1="724.0391" y2="724.0391"/><text fill="#000000" font-family="sans-serif" font-size="13" font-style="italic" lengthAdjust="spacingAndGlyphs" textLength="148" x="74.5" y="718.9731">remove all DOM nodes</text><polygon fill="#A80036" points="250.5,749.1719,240.5,753.1719,250.5,757.1719,246.5,753.1719" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="244.5" x2="495.5" y1="753.1719" y2="753.1719"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="52" x="256.5" y="748.106">render()</text><polygon fill="#A80036" points="647.5,778.3047,657.5,782.3047,647.5,786.3047,651.5,782.3047" style="stroke: #A80036; stroke-width: 1.0;"/><line style="stroke: #A80036; stroke-width: 1.0;" x1="496.5" x2="653.5" y1="782.3047" y2="782.3047"/><text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacingAndGlyphs" textLength="117" x="503.5" y="777.2388">dispatch($redraw)</text><!--MD5=[cd1de52496ffc017a87e6273ccf87b23]
@startuml
title H3 Sequence Diagram

entity Application
control Component
entity H3
entity Router
database Store

Application - -> H3 : <b>h3.init()</b>
H3 -> Store : //initialize//
Store -> Store : //execute modules//
H3 -> Store : dispatch($init)
H3 -> Application : preStart()
H3 -> Router : //initialize//
H3 -> Router : start()
Router -> Store: dispatch($navigation)
Router -> Component : render()
Router -> Store: dispatch($redraw)

H3 -> Application : postStart()

group redraw
    Component -> H3 : <b>h3.redraw()</b>
    H3 -> Component : redraw()
    H3 -> Store: dispatch($redraw)
end

group navigation
    Component -> H3 : <b>h3.navigateTo()</b>
    H3 -> Router : processPath()
    Router -> Store: dispatch($navigation)
    Router -> Application : //remove all DOM nodes//
    Application -> Component : //remove all DOM nodes//
    Router -> Component : render()
    Router -> Store: dispatch($redraw)
    
end
@enduml

PlantUML version 1.2020.09beta17(Unknown compile time)
(GPL source distribution)
Java Runtime: Java(TM) SE Runtime Environment
JVM: Java HotSpot(TM) 64-Bit Server VM
Java Version: 14.0.1+7
Operating System: Linux
Default Encoding: UTF-8
Language: en
Country: US
--></g></svg>