dreemgl
Version:
DreemGL is an open-source multi-screen prototyping framework for mediated environments, with a visual editor and shader styling for webGL and DALi runtimes written in JavaScript. As a toolkit for gpu-accelerated multiscreen development, DreemGL includes
815 lines (776 loc) • 50.2 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CodeRay output</title>
<style type="text/css">
.CodeRay .line-numbers a {
text-decoration: inherit;
color: inherit;
}
body {
background-color: white;
padding: 0;
margin: 0;
}
.CodeRay {
background-color: hsl(0,0%,95%);
border: 1px solid silver;
color: black;
}
.CodeRay pre {
margin: 0px;
}
span.CodeRay { white-space: pre; border: 0px; padding: 2px; }
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px; }
table.CodeRay td { padding: 2px 4px; vertical-align: top; }
.CodeRay .line-numbers {
background-color: hsl(180,65%,90%);
color: gray;
text-align: right;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.CodeRay .line-numbers a {
background-color: hsl(180,65%,90%) !important;
color: gray !important;
text-decoration: none !important;
}
.CodeRay .line-numbers pre {
word-break: normal;
}
.CodeRay .line-numbers a:target { color: blue !important; }
.CodeRay .line-numbers .highlighted { color: red !important; }
.CodeRay .line-numbers .highlighted a { color: red !important; }
.CodeRay span.line-numbers { padding: 0px 4px; }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay .code { width: 100%; }
.CodeRay .debug { color: white !important; background: blue !important; }
.CodeRay .annotation { color:#007 }
.CodeRay .attribute-name { color:#b48 }
.CodeRay .attribute-value { color:#700 }
.CodeRay .binary { color:#549 }
.CodeRay .binary .char { color:#325 }
.CodeRay .binary .delimiter { color:#325 }
.CodeRay .char { color:#D20 }
.CodeRay .char .content { color:#D20 }
.CodeRay .char .delimiter { color:#710 }
.CodeRay .class { color:#B06; font-weight:bold }
.CodeRay .class-variable { color:#369 }
.CodeRay .color { color:#0A0 }
.CodeRay .comment { color:#777 }
.CodeRay .comment .char { color:#444 }
.CodeRay .comment .delimiter { color:#444 }
.CodeRay .constant { color:#036; font-weight:bold }
.CodeRay .decorator { color:#B0B }
.CodeRay .definition { color:#099; font-weight:bold }
.CodeRay .delimiter { color:black }
.CodeRay .directive { color:#088; font-weight:bold }
.CodeRay .docstring { color:#D42; }
.CodeRay .doctype { color:#34b }
.CodeRay .done { text-decoration: line-through; color: gray }
.CodeRay .entity { color:#800; font-weight:bold }
.CodeRay .error { color:#F00; background-color:#FAA }
.CodeRay .escape { color:#666 }
.CodeRay .exception { color:#C00; font-weight:bold }
.CodeRay .float { color:#60E }
.CodeRay .function { color:#06B; font-weight:bold }
.CodeRay .function .delimiter { color:#024; font-weight:bold }
.CodeRay .global-variable { color:#d70 }
.CodeRay .hex { color:#02b }
.CodeRay .id { color:#33D; font-weight:bold }
.CodeRay .include { color:#B44; font-weight:bold }
.CodeRay .inline { background-color: hsla(0,0%,0%,0.07); color: black }
.CodeRay .inline-delimiter { font-weight: bold; color: #666 }
.CodeRay .instance-variable { color:#33B }
.CodeRay .integer { color:#00D }
.CodeRay .imaginary { color:#f00 }
.CodeRay .important { color:#D00 }
.CodeRay .key { color: #606 }
.CodeRay .key .char { color: #60f }
.CodeRay .key .delimiter { color: #404 }
.CodeRay .keyword { color:#080; font-weight:bold }
.CodeRay .label { color:#970; font-weight:bold }
.CodeRay .local-variable { color:#950 }
.CodeRay .map .content { color:#808 }
.CodeRay .map .delimiter { color:#40A}
.CodeRay .map { background-color:hsla(200,100%,50%,0.06); }
.CodeRay .namespace { color:#707; font-weight:bold }
.CodeRay .octal { color:#40E }
.CodeRay .operator { }
.CodeRay .predefined { color:#369; font-weight:bold }
.CodeRay .predefined-constant { color:#069 }
.CodeRay .predefined-type { color:#0a8; font-weight:bold }
.CodeRay .preprocessor { color:#579 }
.CodeRay .pseudo-class { color:#00C; font-weight:bold }
.CodeRay .regexp { background-color:hsla(300,100%,50%,0.06); }
.CodeRay .regexp .content { color:#808 }
.CodeRay .regexp .delimiter { color:#404 }
.CodeRay .regexp .modifier { color:#C2C }
.CodeRay .reserved { color:#080; font-weight:bold }
.CodeRay .shell { background-color:hsla(120,100%,50%,0.06); }
.CodeRay .shell .content { color:#2B2 }
.CodeRay .shell .delimiter { color:#161 }
.CodeRay .string { background-color:hsla(0,100%,50%,0.05); }
.CodeRay .string .char { color: #b0b }
.CodeRay .string .content { color: #D20 }
.CodeRay .string .delimiter { color: #710 }
.CodeRay .string .modifier { color: #E40 }
.CodeRay .symbol { color:#A60 }
.CodeRay .symbol .content { color:#A60 }
.CodeRay .symbol .delimiter { color:#740 }
.CodeRay .tag { color:#070; font-weight:bold }
.CodeRay .type { color:#339; font-weight:bold }
.CodeRay .value { color: #088 }
.CodeRay .variable { color:#037 }
.CodeRay .insert { background: hsla(120,100%,50%,0.12) }
.CodeRay .delete { background: hsla(0,100%,50%,0.12) }
.CodeRay .change { color: #bbf; background: #007 }
.CodeRay .head { color: #f8f; background: #505 }
.CodeRay .head .filename { color: white; }
.CodeRay .delete .eyecatcher { background-color: hsla(0,100%,50%,0.2); border: 1px solid hsla(0,100%,45%,0.5); margin: -1px; border-bottom: none; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.CodeRay .insert .eyecatcher { background-color: hsla(120,100%,50%,0.2); border: 1px solid hsla(120,100%,25%,0.5); margin: -1px; border-top: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.CodeRay .insert .insert { color: #0c0; background:transparent; font-weight:bold }
.CodeRay .delete .delete { color: #c00; background:transparent; font-weight:bold }
.CodeRay .change .change { color: #88f }
.CodeRay .head .head { color: #f4f }
.CodeRay {
border: none;
}
</style>
</head>
<body>
<table class="CodeRay"><tr>
<td class="line-numbers"><pre><a href="#n1" name="n1">1</a>
<a href="#n2" name="n2">2</a>
<a href="#n3" name="n3">3</a>
<a href="#n4" name="n4">4</a>
<a href="#n5" name="n5">5</a>
<a href="#n6" name="n6">6</a>
<a href="#n7" name="n7">7</a>
<a href="#n8" name="n8">8</a>
<a href="#n9" name="n9">9</a>
<strong><a href="#n10" name="n10">10</a></strong>
<a href="#n11" name="n11">11</a>
<a href="#n12" name="n12">12</a>
<a href="#n13" name="n13">13</a>
<a href="#n14" name="n14">14</a>
<a href="#n15" name="n15">15</a>
<a href="#n16" name="n16">16</a>
<a href="#n17" name="n17">17</a>
<a href="#n18" name="n18">18</a>
<a href="#n19" name="n19">19</a>
<strong><a href="#n20" name="n20">20</a></strong>
<a href="#n21" name="n21">21</a>
<a href="#n22" name="n22">22</a>
<a href="#n23" name="n23">23</a>
<a href="#n24" name="n24">24</a>
<a href="#n25" name="n25">25</a>
<a href="#n26" name="n26">26</a>
<a href="#n27" name="n27">27</a>
<a href="#n28" name="n28">28</a>
<a href="#n29" name="n29">29</a>
<strong><a href="#n30" name="n30">30</a></strong>
<a href="#n31" name="n31">31</a>
<a href="#n32" name="n32">32</a>
<a href="#n33" name="n33">33</a>
<a href="#n34" name="n34">34</a>
<a href="#n35" name="n35">35</a>
<a href="#n36" name="n36">36</a>
<a href="#n37" name="n37">37</a>
<a href="#n38" name="n38">38</a>
<a href="#n39" name="n39">39</a>
<strong><a href="#n40" name="n40">40</a></strong>
<a href="#n41" name="n41">41</a>
<a href="#n42" name="n42">42</a>
<a href="#n43" name="n43">43</a>
<a href="#n44" name="n44">44</a>
<a href="#n45" name="n45">45</a>
<a href="#n46" name="n46">46</a>
<a href="#n47" name="n47">47</a>
<a href="#n48" name="n48">48</a>
<a href="#n49" name="n49">49</a>
<strong><a href="#n50" name="n50">50</a></strong>
<a href="#n51" name="n51">51</a>
<a href="#n52" name="n52">52</a>
<a href="#n53" name="n53">53</a>
<a href="#n54" name="n54">54</a>
<a href="#n55" name="n55">55</a>
<a href="#n56" name="n56">56</a>
<a href="#n57" name="n57">57</a>
<a href="#n58" name="n58">58</a>
<a href="#n59" name="n59">59</a>
<strong><a href="#n60" name="n60">60</a></strong>
<a href="#n61" name="n61">61</a>
<a href="#n62" name="n62">62</a>
<a href="#n63" name="n63">63</a>
<a href="#n64" name="n64">64</a>
<a href="#n65" name="n65">65</a>
<a href="#n66" name="n66">66</a>
<a href="#n67" name="n67">67</a>
<a href="#n68" name="n68">68</a>
<a href="#n69" name="n69">69</a>
<strong><a href="#n70" name="n70">70</a></strong>
<a href="#n71" name="n71">71</a>
<a href="#n72" name="n72">72</a>
<a href="#n73" name="n73">73</a>
<a href="#n74" name="n74">74</a>
<a href="#n75" name="n75">75</a>
<a href="#n76" name="n76">76</a>
<a href="#n77" name="n77">77</a>
<a href="#n78" name="n78">78</a>
<a href="#n79" name="n79">79</a>
<strong><a href="#n80" name="n80">80</a></strong>
<a href="#n81" name="n81">81</a>
<a href="#n82" name="n82">82</a>
<a href="#n83" name="n83">83</a>
<a href="#n84" name="n84">84</a>
<a href="#n85" name="n85">85</a>
<a href="#n86" name="n86">86</a>
<a href="#n87" name="n87">87</a>
<a href="#n88" name="n88">88</a>
<a href="#n89" name="n89">89</a>
<strong><a href="#n90" name="n90">90</a></strong>
<a href="#n91" name="n91">91</a>
<a href="#n92" name="n92">92</a>
<a href="#n93" name="n93">93</a>
<a href="#n94" name="n94">94</a>
<a href="#n95" name="n95">95</a>
<a href="#n96" name="n96">96</a>
<a href="#n97" name="n97">97</a>
<a href="#n98" name="n98">98</a>
<a href="#n99" name="n99">99</a>
<strong><a href="#n100" name="n100">100</a></strong>
<a href="#n101" name="n101">101</a>
<a href="#n102" name="n102">102</a>
<a href="#n103" name="n103">103</a>
<a href="#n104" name="n104">104</a>
<a href="#n105" name="n105">105</a>
<a href="#n106" name="n106">106</a>
<a href="#n107" name="n107">107</a>
<a href="#n108" name="n108">108</a>
<a href="#n109" name="n109">109</a>
<strong><a href="#n110" name="n110">110</a></strong>
<a href="#n111" name="n111">111</a>
<a href="#n112" name="n112">112</a>
<a href="#n113" name="n113">113</a>
<a href="#n114" name="n114">114</a>
<a href="#n115" name="n115">115</a>
<a href="#n116" name="n116">116</a>
<a href="#n117" name="n117">117</a>
<a href="#n118" name="n118">118</a>
<a href="#n119" name="n119">119</a>
<strong><a href="#n120" name="n120">120</a></strong>
<a href="#n121" name="n121">121</a>
<a href="#n122" name="n122">122</a>
<a href="#n123" name="n123">123</a>
<a href="#n124" name="n124">124</a>
<a href="#n125" name="n125">125</a>
<a href="#n126" name="n126">126</a>
<a href="#n127" name="n127">127</a>
<a href="#n128" name="n128">128</a>
<a href="#n129" name="n129">129</a>
<strong><a href="#n130" name="n130">130</a></strong>
<a href="#n131" name="n131">131</a>
<a href="#n132" name="n132">132</a>
<a href="#n133" name="n133">133</a>
<a href="#n134" name="n134">134</a>
<a href="#n135" name="n135">135</a>
<a href="#n136" name="n136">136</a>
<a href="#n137" name="n137">137</a>
<a href="#n138" name="n138">138</a>
<a href="#n139" name="n139">139</a>
<strong><a href="#n140" name="n140">140</a></strong>
<a href="#n141" name="n141">141</a>
<a href="#n142" name="n142">142</a>
<a href="#n143" name="n143">143</a>
<a href="#n144" name="n144">144</a>
<a href="#n145" name="n145">145</a>
<a href="#n146" name="n146">146</a>
<a href="#n147" name="n147">147</a>
<a href="#n148" name="n148">148</a>
<a href="#n149" name="n149">149</a>
<strong><a href="#n150" name="n150">150</a></strong>
<a href="#n151" name="n151">151</a>
<a href="#n152" name="n152">152</a>
<a href="#n153" name="n153">153</a>
<a href="#n154" name="n154">154</a>
<a href="#n155" name="n155">155</a>
<a href="#n156" name="n156">156</a>
<a href="#n157" name="n157">157</a>
<a href="#n158" name="n158">158</a>
<a href="#n159" name="n159">159</a>
<strong><a href="#n160" name="n160">160</a></strong>
<a href="#n161" name="n161">161</a>
<a href="#n162" name="n162">162</a>
<a href="#n163" name="n163">163</a>
<a href="#n164" name="n164">164</a>
<a href="#n165" name="n165">165</a>
<a href="#n166" name="n166">166</a>
<a href="#n167" name="n167">167</a>
<a href="#n168" name="n168">168</a>
<a href="#n169" name="n169">169</a>
<strong><a href="#n170" name="n170">170</a></strong>
<a href="#n171" name="n171">171</a>
<a href="#n172" name="n172">172</a>
<a href="#n173" name="n173">173</a>
<a href="#n174" name="n174">174</a>
<a href="#n175" name="n175">175</a>
<a href="#n176" name="n176">176</a>
<a href="#n177" name="n177">177</a>
<a href="#n178" name="n178">178</a>
<a href="#n179" name="n179">179</a>
<strong><a href="#n180" name="n180">180</a></strong>
<a href="#n181" name="n181">181</a>
<a href="#n182" name="n182">182</a>
<a href="#n183" name="n183">183</a>
<a href="#n184" name="n184">184</a>
<a href="#n185" name="n185">185</a>
<a href="#n186" name="n186">186</a>
<a href="#n187" name="n187">187</a>
<a href="#n188" name="n188">188</a>
<a href="#n189" name="n189">189</a>
<strong><a href="#n190" name="n190">190</a></strong>
<a href="#n191" name="n191">191</a>
<a href="#n192" name="n192">192</a>
<a href="#n193" name="n193">193</a>
<a href="#n194" name="n194">194</a>
<a href="#n195" name="n195">195</a>
<a href="#n196" name="n196">196</a>
<a href="#n197" name="n197">197</a>
<a href="#n198" name="n198">198</a>
<a href="#n199" name="n199">199</a>
<strong><a href="#n200" name="n200">200</a></strong>
<a href="#n201" name="n201">201</a>
<a href="#n202" name="n202">202</a>
<a href="#n203" name="n203">203</a>
<a href="#n204" name="n204">204</a>
<a href="#n205" name="n205">205</a>
<a href="#n206" name="n206">206</a>
<a href="#n207" name="n207">207</a>
<a href="#n208" name="n208">208</a>
<a href="#n209" name="n209">209</a>
<strong><a href="#n210" name="n210">210</a></strong>
<a href="#n211" name="n211">211</a>
<a href="#n212" name="n212">212</a>
<a href="#n213" name="n213">213</a>
<a href="#n214" name="n214">214</a>
<a href="#n215" name="n215">215</a>
<a href="#n216" name="n216">216</a>
<a href="#n217" name="n217">217</a>
<a href="#n218" name="n218">218</a>
<a href="#n219" name="n219">219</a>
<strong><a href="#n220" name="n220">220</a></strong>
<a href="#n221" name="n221">221</a>
<a href="#n222" name="n222">222</a>
<a href="#n223" name="n223">223</a>
<a href="#n224" name="n224">224</a>
<a href="#n225" name="n225">225</a>
<a href="#n226" name="n226">226</a>
<a href="#n227" name="n227">227</a>
<a href="#n228" name="n228">228</a>
<a href="#n229" name="n229">229</a>
<strong><a href="#n230" name="n230">230</a></strong>
<a href="#n231" name="n231">231</a>
<a href="#n232" name="n232">232</a>
<a href="#n233" name="n233">233</a>
<a href="#n234" name="n234">234</a>
<a href="#n235" name="n235">235</a>
<a href="#n236" name="n236">236</a>
<a href="#n237" name="n237">237</a>
<a href="#n238" name="n238">238</a>
<a href="#n239" name="n239">239</a>
<strong><a href="#n240" name="n240">240</a></strong>
<a href="#n241" name="n241">241</a>
<a href="#n242" name="n242">242</a>
<a href="#n243" name="n243">243</a>
<a href="#n244" name="n244">244</a>
<a href="#n245" name="n245">245</a>
<a href="#n246" name="n246">246</a>
<a href="#n247" name="n247">247</a>
<a href="#n248" name="n248">248</a>
<a href="#n249" name="n249">249</a>
<strong><a href="#n250" name="n250">250</a></strong>
<a href="#n251" name="n251">251</a>
<a href="#n252" name="n252">252</a>
<a href="#n253" name="n253">253</a>
<a href="#n254" name="n254">254</a>
<a href="#n255" name="n255">255</a>
<a href="#n256" name="n256">256</a>
<a href="#n257" name="n257">257</a>
<a href="#n258" name="n258">258</a>
<a href="#n259" name="n259">259</a>
<strong><a href="#n260" name="n260">260</a></strong>
<a href="#n261" name="n261">261</a>
<a href="#n262" name="n262">262</a>
<a href="#n263" name="n263">263</a>
<a href="#n264" name="n264">264</a>
<a href="#n265" name="n265">265</a>
<a href="#n266" name="n266">266</a>
<a href="#n267" name="n267">267</a>
<a href="#n268" name="n268">268</a>
<a href="#n269" name="n269">269</a>
<strong><a href="#n270" name="n270">270</a></strong>
<a href="#n271" name="n271">271</a>
<a href="#n272" name="n272">272</a>
<a href="#n273" name="n273">273</a>
<a href="#n274" name="n274">274</a>
<a href="#n275" name="n275">275</a>
<a href="#n276" name="n276">276</a>
<a href="#n277" name="n277">277</a>
<a href="#n278" name="n278">278</a>
<a href="#n279" name="n279">279</a>
<strong><a href="#n280" name="n280">280</a></strong>
<a href="#n281" name="n281">281</a>
<a href="#n282" name="n282">282</a>
<a href="#n283" name="n283">283</a>
<a href="#n284" name="n284">284</a>
<a href="#n285" name="n285">285</a>
<a href="#n286" name="n286">286</a>
<a href="#n287" name="n287">287</a>
<a href="#n288" name="n288">288</a>
<a href="#n289" name="n289">289</a>
<strong><a href="#n290" name="n290">290</a></strong>
<a href="#n291" name="n291">291</a>
<a href="#n292" name="n292">292</a>
<a href="#n293" name="n293">293</a>
<a href="#n294" name="n294">294</a>
<a href="#n295" name="n295">295</a>
<a href="#n296" name="n296">296</a>
<a href="#n297" name="n297">297</a>
<a href="#n298" name="n298">298</a>
<a href="#n299" name="n299">299</a>
<strong><a href="#n300" name="n300">300</a></strong>
<a href="#n301" name="n301">301</a>
<a href="#n302" name="n302">302</a>
<a href="#n303" name="n303">303</a>
<a href="#n304" name="n304">304</a>
<a href="#n305" name="n305">305</a>
<a href="#n306" name="n306">306</a>
<a href="#n307" name="n307">307</a>
<a href="#n308" name="n308">308</a>
<a href="#n309" name="n309">309</a>
<strong><a href="#n310" name="n310">310</a></strong>
<a href="#n311" name="n311">311</a>
<a href="#n312" name="n312">312</a>
<a href="#n313" name="n313">313</a>
<a href="#n314" name="n314">314</a>
<a href="#n315" name="n315">315</a>
<a href="#n316" name="n316">316</a>
<a href="#n317" name="n317">317</a>
<a href="#n318" name="n318">318</a>
<a href="#n319" name="n319">319</a>
<strong><a href="#n320" name="n320">320</a></strong>
<a href="#n321" name="n321">321</a>
<a href="#n322" name="n322">322</a>
<a href="#n323" name="n323">323</a>
<a href="#n324" name="n324">324</a>
<a href="#n325" name="n325">325</a>
<a href="#n326" name="n326">326</a>
<a href="#n327" name="n327">327</a>
<a href="#n328" name="n328">328</a>
<a href="#n329" name="n329">329</a>
<strong><a href="#n330" name="n330">330</a></strong>
<a href="#n331" name="n331">331</a>
<a href="#n332" name="n332">332</a>
<a href="#n333" name="n333">333</a>
</pre></td>
<td class="code"><pre><span class="comment">/* DreemGL is a collaboration between Teeming Society & Samsung Electronics, sponsored by Samsung and others.
Copyright 2015-2016 Teeming Society. Licensed under the Apache License, Version 2.0 (the "License"); You may not use this file except in compliance with the License.
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and limitations under the License.*/</span>
define.<span class="reserved">class</span>(<span class="string"><span class="delimiter">'</span><span class="content">$ui/label</span><span class="delimiter">'</span></span>, <span class="keyword">function</span> (require, <span class="predefined">$ui$</span>, view, label) {
<span class="keyword">var</span> ROW_HEIGHT = <span class="integer">28</span>
<span class="local-variable">this</span>.text = <span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span>
<span class="local-variable">this</span>.bgcolor = <span class="predefined-constant">NaN</span>
<span class="local-variable">this</span>.height = ROW_HEIGHT
<span class="local-variable">this</span>.cursor = <span class="string"><span class="delimiter">'</span><span class="content">move</span><span class="delimiter">'</span></span>
<span class="keyword">var</span> ubuntufont = require(<span class="string"><span class="delimiter">'</span><span class="content">$resources/fonts/ubuntu_medium_256_baked.glf</span><span class="delimiter">'</span></span>)
<span class="local-variable">this</span>.attributes = {
<span class="key">zoom</span>: wire(<span class="string"><span class="delimiter">'</span><span class="content">this.parent.zoom</span><span class="delimiter">'</span></span>),
<span class="key">scroll</span>: wire(<span class="string"><span class="delimiter">'</span><span class="content">this.parent.scroll</span><span class="delimiter">'</span></span>),
<span class="key">data</span>: Config({<span class="key">type</span>: Array, <span class="key">value</span>: wire(<span class="string"><span class="delimiter">'</span><span class="content">this.parent.data</span><span class="delimiter">'</span></span>)}),
<span class="key">rows</span>: Config({<span class="key">type</span>: Number, <span class="key">value</span>: <span class="integer">1</span>})
}
<span class="local-variable">this</span>.<span class="function">onrows</span> = <span class="keyword">function</span> () {
<span class="local-variable">this</span>.height = <span class="local-variable">this</span>.rows * ROW_HEIGHT
}
<span class="comment">// Temporarily disable new event creation on drag</span>
<span class="comment">// this.pointermove = function(event) {</span>
<span class="comment">// var eventghost = this.find('eventghost')</span>
<span class="comment">// var timeline = this.parent</span>
<span class="comment">// eventghost.title = ''</span>
<span class="comment">// eventghost.start = timeline.getRangeStart() + timeline.getRange() * (event.min[0] / this.layout.width)</span>
<span class="comment">// eventghost.end = timeline.getRangeStart() + timeline.getRange() * (event.max[0] / this.layout.width)</span>
<span class="comment">// timeline.lockscroll = true</span>
<span class="comment">// this.redraw()</span>
<span class="comment">// }</span>
<span class="comment">//</span>
<span class="comment">// this.pointerend = function(event) {</span>
<span class="comment">// var eventghost = this.find('eventghost')</span>
<span class="comment">// var timeline = this.parent</span>
<span class="comment">// if (abs(event.delta.x) > 2) {</span>
<span class="comment">// var eventdata = {</span>
<span class="comment">// title: 'New Event',</span>
<span class="comment">// date: eventghost.start,</span>
<span class="comment">// enddate: eventghost.end,</span>
<span class="comment">// metadata: {</span>
<span class="comment">// location: {</span>
<span class="comment">// name: 'New Location',</span>
<span class="comment">// lattitude: 0,</span>
<span class="comment">// longitute: 0</span>
<span class="comment">// }</span>
<span class="comment">// }</span>
<span class="comment">// }</span>
<span class="comment">// timeline.makeEvent(eventdata)</span>
<span class="comment">// }</span>
<span class="comment">// eventghost.start = 0</span>
<span class="comment">// eventghost.end = 0</span>
<span class="comment">// timeline.lockscroll = false</span>
<span class="comment">// }</span>
define.<span class="reserved">class</span>(<span class="local-variable">this</span>, <span class="string"><span class="delimiter">'</span><span class="content">event</span><span class="delimiter">'</span></span>, view, <span class="keyword">function</span>(){
<span class="local-variable">this</span>.bgcolor = <span class="string"><span class="delimiter">'</span><span class="content">#999999</span><span class="delimiter">'</span></span>
<span class="local-variable">this</span>.position = <span class="string"><span class="delimiter">'</span><span class="content">absolute</span><span class="delimiter">'</span></span>
<span class="local-variable">this</span>.flexdirection = <span class="string"><span class="delimiter">'</span><span class="content">row</span><span class="delimiter">'</span></span>
<span class="local-variable">this</span>.justifycontent = <span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
<span class="local-variable">this</span>.borderradius = <span class="integer">6</span>
<span class="local-variable">this</span>.cursor = <span class="string"><span class="delimiter">'</span><span class="content">ew-resize</span><span class="delimiter">'</span></span>
<span class="keyword">var</span> RESIZE_HANDLE_WIDTH = <span class="integer">10</span>
<span class="local-variable">this</span>.attributes = {
<span class="key">title</span>: <span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span>,
<span class="key">id</span>: <span class="predefined-constant">null</span>,
<span class="key">color</span>: vec4(<span class="integer">1</span>,<span class="integer">1</span>,<span class="integer">1</span>,<span class="integer">1</span>),
<span class="key">duration</span>: <span class="integer">1</span>,
<span class="key">offset</span>: <span class="integer">0</span>,
<span class="key">start</span>: <span class="integer">0</span>,
<span class="key">end</span>: <span class="integer">0</span>,
<span class="key">row</span>: <span class="integer">0</span>
}
<span class="keyword">var</span> editmode = <span class="string"><span class="delimiter">'</span><span class="delimiter">'</span></span>
<span class="local-variable">this</span>.pointerhover = <span class="local-variable">this</span>.<span class="function">pointerstart</span> = <span class="keyword">function</span> (event) {
<span class="local-variable">this</span>.cursor = <span class="string"><span class="delimiter">'</span><span class="content">ew-resize</span><span class="delimiter">'</span></span>
editmode = <span class="string"><span class="delimiter">'</span><span class="content">move</span><span class="delimiter">'</span></span>
<span class="keyword">var</span> localstart = <span class="local-variable">this</span>.globalToLocal(event.position)
<span class="keyword">var</span> localstartx = localstart[<span class="integer">0</span>] - (<span class="local-variable">this</span>.offset - <span class="local-variable">this</span>.scroll[<span class="integer">0</span>]) * event.view.layout.width
<span class="keyword">var</span> pxduration = <span class="local-variable">this</span>.duration * event.view.layout.width
<span class="keyword">if</span> (localstartx < min(RESIZE_HANDLE_WIDTH, pxduration / <span class="integer">2</span>)) {
<span class="local-variable">this</span>.cursor = <span class="string"><span class="delimiter">'</span><span class="content">w-resize</span><span class="delimiter">'</span></span>
editmode = <span class="string"><span class="delimiter">'</span><span class="content">setstart</span><span class="delimiter">'</span></span>
} <span class="keyword">else</span> <span class="keyword">if</span> (pxduration - localstartx < min(RESIZE_HANDLE_WIDTH, pxduration / <span class="integer">2</span>)) {
<span class="local-variable">this</span>.cursor = <span class="string"><span class="delimiter">'</span><span class="content">e-resize</span><span class="delimiter">'</span></span>
editmode = <span class="string"><span class="delimiter">'</span><span class="content">setend</span><span class="delimiter">'</span></span>
}
}
<span class="local-variable">this</span>.<span class="function">pointermove</span> = <span class="keyword">function</span>(event) {
<span class="keyword">var</span> eventghost = <span class="local-variable">this</span>.parent.find(<span class="string"><span class="delimiter">'</span><span class="content">eventghost</span><span class="delimiter">'</span></span>)
<span class="keyword">var</span> timeline = <span class="local-variable">this</span>.parent.parent
<span class="keyword">var</span> offset = event.delta[<span class="integer">0</span>] / timeline.layout.width
<span class="keyword">if</span> (editmode == <span class="string"><span class="delimiter">'</span><span class="content">setstart</span><span class="delimiter">'</span></span>) {
eventghost.start = <span class="local-variable">this</span>.start + timeline.getRange() * offset
eventghost.end = <span class="local-variable">this</span>.end
} <span class="keyword">else</span> <span class="keyword">if</span> (editmode == <span class="string"><span class="delimiter">'</span><span class="content">move</span><span class="delimiter">'</span></span>) {
eventghost.start = <span class="local-variable">this</span>.start + timeline.getRange() * offset
eventghost.end = <span class="local-variable">this</span>.end + timeline.getRange() * offset
} <span class="keyword">else</span> <span class="keyword">if</span> (editmode == <span class="string"><span class="delimiter">'</span><span class="content">setend</span><span class="delimiter">'</span></span>) {
eventghost.start = <span class="local-variable">this</span>.start
eventghost.end = <span class="local-variable">this</span>.end + timeline.getRange() * offset
}
<span class="keyword">if</span> (eventghost.start > eventghost.end) {
<span class="keyword">var</span> start = eventghost.start
eventghost.start = eventghost.end
eventghost.end = start
}
timeline.lockscroll = <span class="predefined-constant">true</span>
<span class="local-variable">this</span>.redraw()
}
<span class="local-variable">this</span>.<span class="function">pointerend</span> = <span class="keyword">function</span>(event) {
<span class="keyword">if</span> (abs(event.delta[<span class="integer">0</span>]) < <span class="integer">2</span>) <span class="keyword">return</span>
<span class="keyword">var</span> eventghost = <span class="local-variable">this</span>.parent.find(<span class="string"><span class="delimiter">'</span><span class="content">eventghost</span><span class="delimiter">'</span></span>)
<span class="keyword">var</span> timeline = <span class="local-variable">this</span>.parent.parent
timeline.updateEvent(<span class="local-variable">this</span>.id, {
<span class="key">date</span>: eventghost.start,
<span class="key">enddate</span>: eventghost.end,
})
eventghost.start = <span class="integer">0</span>
eventghost.end = <span class="integer">0</span>
timeline.lockscroll = <span class="predefined-constant">false</span>
}
<span class="local-variable">this</span>.<span class="function">pointertap</span> = <span class="keyword">function</span>(event) {
<span class="keyword">if</span> (event.clicker === <span class="integer">2</span>) {
<span class="keyword">var</span> timeline = <span class="local-variable">this</span>.parent.parent
timeline.deleteEvent(<span class="local-variable">this</span>.id)
}
}
<span class="local-variable">this</span>.<span class="function">layout</span> = <span class="keyword">function</span>(){
<span class="local-variable">this</span>._layout.width = <span class="local-variable">this</span>.parent._layout.width
<span class="local-variable">this</span>._layout.height = <span class="local-variable">this</span>.parent._layout.height / <span class="local-variable">this</span>.parent.rows
<span class="keyword">if</span> (<span class="local-variable">this</span>.row === -<span class="integer">1</span>) {
<span class="local-variable">this</span>._layout.top = <span class="integer">0</span>
<span class="local-variable">this</span>._layout.height = <span class="local-variable">this</span>.parent._layout.height
} <span class="keyword">else</span> {
<span class="local-variable">this</span>._layout.top = <span class="local-variable">this</span>._layout.height * <span class="local-variable">this</span>.row
}
}
<span class="local-variable">this</span>.<span class="function">atDraw</span> = <span class="keyword">function</span> () {
<span class="local-variable">this</span>.scroll = <span class="local-variable">this</span>.parent.scroll
<span class="local-variable">this</span>.duration = <span class="keyword">new</span> Date(<span class="local-variable">this</span>.end).getTime() - <span class="keyword">new</span> Date(<span class="local-variable">this</span>.start).getTime()
<span class="local-variable">this</span>.duration = <span class="local-variable">this</span>.duration / <span class="local-variable">this</span>.parent.parent.TIME_SCALE / <span class="local-variable">this</span>.parent.zoom
<span class="local-variable">this</span>.offset = <span class="keyword">new</span> Date(<span class="local-variable">this</span>.start).getTime() - <span class="local-variable">this</span>.parent.parent.getStart()
<span class="local-variable">this</span>.offset = <span class="local-variable">this</span>.offset / <span class="local-variable">this</span>.parent.parent.TIME_SCALE / <span class="local-variable">this</span>.parent.zoom
<span class="local-variable">this</span>.find(<span class="string"><span class="delimiter">'</span><span class="content">eventlabel</span><span class="delimiter">'</span></span>).xoffset = (<span class="local-variable">this</span>.offset - <span class="local-variable">this</span>.scroll[<span class="integer">0</span>]) * <span class="local-variable">this</span>.layout.width
<span class="local-variable">this</span>.find(<span class="string"><span class="delimiter">'</span><span class="content">eventlabel</span><span class="delimiter">'</span></span>).xwidth = <span class="local-variable">this</span>.duration * <span class="local-variable">this</span>.layout.width
}
<span class="local-variable">this</span>.roundedrect = {
<span class="function">position</span>: <span class="keyword">function</span>(){
pos = mesh.pos.xy
pos.x = pos.x * view.duration + (view.offset - view.scroll.x) * view.layout.width
<span class="keyword">var</span> ca = cos(mesh.angle + PI)
<span class="keyword">var</span> sa = sin(mesh.angle + PI)
<span class="keyword">var</span> rad = (mesh.radmult.x * view.borderradius.x + mesh.radmult.y * view.borderradius.y + mesh.radmult.z * view.borderradius.z + mesh.radmult.w * view.borderradius.w)
pos.x += ca * rad
pos.y += sa * rad
uv = vec2(pos.x / view.layout.width, pos.y / view.layout.height)
sized = vec2(pos.x, pos.y)
<span class="keyword">return</span> vec4(sized.x, sized.y, <span class="integer">0</span>, <span class="integer">1</span>) * view.totalmatrix * view.viewmatrix
},
<span class="function">color</span>: <span class="keyword">function</span>(){
<span class="keyword">var</span> col = view.bgcolorfn(vec2(pos.x / view.layout.width, pos.y/view.layout.height))
<span class="keyword">if</span> (uv.y > <span class="float">0.85</span>) {
<span class="keyword">return</span> vec4(view.color.rgb, col.a * view.opacity)
} <span class="keyword">else</span> {
<span class="keyword">return</span> vec4(col.rgb, col.a * view.opacity)
}
}
}
<span class="local-variable">this</span>.hardrect = {
<span class="function">position</span>: <span class="keyword">function</span>(){
<span class="keyword">var</span> pos = vec2(mesh.x * view.duration + view.offset - view.scroll.x, mesh.y)
<span class="keyword">return</span> vec4(pos.x * view.layout.width, pos.y * view.layout.height, <span class="integer">0</span>, <span class="integer">1</span>) * view.totalmatrix * view.viewmatrix
}
}
define.<span class="reserved">class</span>(<span class="local-variable">this</span>, <span class="string"><span class="delimiter">'</span><span class="content">eventlabel</span><span class="delimiter">'</span></span>, label, <span class="keyword">function</span>(){
<span class="local-variable">this</span>.xoffset = <span class="integer">0</span>
<span class="local-variable">this</span>.xwidth = <span class="integer">0</span>
<span class="local-variable">this</span>.fgcolor = <span class="string"><span class="delimiter">"</span><span class="content">black</span><span class="delimiter">"</span></span>
<span class="local-variable">this</span>.alignself = <span class="string"><span class="delimiter">"</span><span class="content">center</span><span class="delimiter">"</span></span>
<span class="local-variable">this</span>.padding = vec4(<span class="integer">6</span>)
<span class="local-variable">this</span>.<span class="function">atDraw</span> = <span class="keyword">function</span> () {
<span class="local-variable">this</span>.fontsize = <span class="integer">13</span>
<span class="local-variable">this</span>.opacity = <span class="local-variable">this</span>.xwidth < <span class="local-variable">this</span>.layout.width * <span class="float">0.6</span> ? <span class="integer">0</span> : <span class="integer">1</span>
}
<span class="local-variable">this</span>.<span class="function">textstyle</span> = <span class="keyword">function</span>(style, tag) {
<span class="keyword">var</span> pos = style.pos
style.pos = vec3((pos.x + <span class="local-variable">this</span>.xoffset), pos.y, <span class="integer">0</span>)
<span class="keyword">return</span> style
}
})
<span class="local-variable">this</span>.<span class="function">render</span> = <span class="keyword">function</span> () {
<span class="keyword">return</span> [
<span class="local-variable">this</span>.eventlabel({
<span class="key">name</span>: <span class="string"><span class="delimiter">'</span><span class="content">eventlabel</span><span class="delimiter">'</span></span>,
<span class="key">text</span>: <span class="local-variable">this</span>.title,
<span class="key">font</span>: ubuntufont
})
]
}
})
<span class="local-variable">this</span>.<span class="function">renderEvents</span> = <span class="keyword">function</span> (data) {
<span class="keyword">var</span> rows = [[],[],[],[],[],[]]
<span class="local-variable">this</span>.rows = <span class="integer">1</span>
<span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="integer">0</span>; i < data.length; i++) {
<span class="keyword">var</span> color = data[i].color || <span class="predefined-constant">null</span>
<span class="keyword">var</span> event = <span class="local-variable">this</span>.event({
<span class="key">title</span>: data[i].title,
<span class="key">id</span>: data[i].id,
<span class="key">bgcolor</span>: vec4(<span class="float">0.75</span>, <span class="float">0.75</span>, <span class="float">0.75</span>, <span class="integer">1</span>),
<span class="key">color</span>: color || vec4(<span class="integer">1</span>, <span class="integer">1</span>, <span class="integer">1</span>, <span class="integer">1</span>),
<span class="key">start</span>: <span class="keyword">new</span> Date(data[i].date).getTime(),
<span class="key">end</span>: <span class="keyword">new</span> Date(data[i].enddate).getTime()
})
<span class="keyword">for</span> (<span class="keyword">var</span> r = <span class="integer">0</span>; r < rows.length; r++) {
<span class="keyword">var</span> canfit = <span class="predefined-constant">true</span>
<span class="keyword">for</span> (<span class="keyword">var</span> k = <span class="integer">0</span>; k < rows[r].length; k++) {
<span class="keyword">if</span> (!(
(rows[r][k].start > event.end && rows[r][k].end > event.end) ||
(rows[r][k].start < event.start && rows[r][k].end < event.start)
)) {
canfit = <span class="predefined-constant">false</span>
}
}
<span class="keyword">if</span> (canfit) {
event.row = r
<span class="local-variable">this</span>.rows = max(<span class="local-variable">this</span>.rows, r + <span class="integer">1</span>)
rows[r].push(event)
<span class="keyword">break</span>
}
}
}
<span class="keyword">return</span> rows
}
<span class="local-variable">this</span>.<span class="function">render</span> = <span class="keyword">function</span> () {
<span class="keyword">return</span> [
<span class="local-variable">this</span>.renderEvents(<span class="local-variable">this</span>.data),
<span class="local-variable">this</span>.event({
<span class="key">name</span>: <span class="string"><span class="delimiter">"</span><span class="content">eventghost</span><span class="delimiter">"</span></span>,
<span class="key">id</span>: -<span class="integer">1</span>,
<span class="key">size</span>: <span class="integer">3</span>,
<span class="key">opacity</span>: <span class="float">0.5</span>,
<span class="key">fontsize</span>: <span class="integer">6</span>,
<span class="key">start</span>: <span class="integer">0</span>,
<span class="key">end</span>: <span class="integer">0</span>,
<span class="key">bgcolor</span>: vec4(<span class="float">0.2</span>, <span class="float">0.7</span>, <span class="integer">1</span>, <span class="float">0.5</span>),
<span class="key">row</span>: -<span class="integer">1</span>
})
]
}
<span class="comment">// define.class(this, 'eventrects', this.Shader, function(){</span>
<span class="comment">//</span>
<span class="comment">// var vertstruct = define.struct({</span>
<span class="comment">// pos: vec2,</span>
<span class="comment">// uv: vec2,</span>
<span class="comment">// id: float</span>
<span class="comment">// })</span>
<span class="comment">// this.mesh = vertstruct.array()</span>
<span class="comment">//</span>
<span class="comment">// this.update = function(){</span>
<span class="comment">// var startTime = this.view.parent.getStart()</span>
<span class="comment">// var view = this.view</span>
<span class="comment">// var data = view.data</span>
<span class="comment">// var mesh = this.mesh = vertstruct.array();</span>
<span class="comment">// for (var i = 0; i < data.length; i++) {</span>
<span class="comment">//</span>
<span class="comment">// var date = new Date(data[i].date)</span>
<span class="comment">// var enddate = new Date(data[i].enddate)</span>
<span class="comment">//</span>
<span class="comment">// var timeOffset = date.getTime() - startTime</span>
<span class="comment">// var dayOffset = timeOffset / 1000 / 60 / 60 / 24</span>
<span class="comment">// var dayWidth = (enddate.getTime() - date.getTime()) / 1000 / 60 / 60 / 24</span>
<span class="comment">//</span>
<span class="comment">// var w = dayWidth</span>
<span class="comment">// var h = 1</span>
<span class="comment">// var x = dayOffset</span>
<span class="comment">// var y = 0</span>
<span class="comment">//</span>
<span class="comment">// mesh.pushQuad(</span>
<span class="comment">// x , y , 0, 0, i,</span>
<span class="comment">// x+w, y , 1, 0, i,</span>
<span class="comment">// x , y+h, 0, 1, i,</span>
<span class="comment">// x+w, y+h, 1, 1, i</span>
<span class="comment">// )</span>
<span class="comment">// }</span>
<span class="comment">// }</span>
<span class="comment">//</span>
<span class="comment">// this.position = function(){</span>
<span class="comment">// var pos = mesh.pos</span>
<span class="comment">// pos.x = pos.x - view.zoom * view.scroll.x</span>
<span class="comment">// pos = pos * vec2(view.layout.width / view.zoom, view.layout.height)</span>
<span class="comment">// return vec4(pos, 0, 1) * view.totalmatrix * view.viewmatrix</span>
<span class="comment">// }</span>
<span class="comment">// this.color = function(){</span>
<span class="comment">// PickGuid = mesh.id</span>
<span class="comment">// if (view.hoverid == mesh.id){</span>
<span class="comment">// return vec4(0.5, 0.75, 1, 1)</span>
<span class="comment">// }</span>
<span class="comment">// return vec4(0.75, 0.75, 0.75, 1)</sp