<div dir="ltr">Hello everyone,<div><br></div><div>I tried to import the <a href="https://konvajs.github.io/docs/overview.html">Konva</a> library into my web activity (it is at least 500 ko unminified : is it a trouble ?) following the RequireJS shim section tutorial (I put it in the lib folder of my activity)</div><div><br></div><div>---------------------------- [ACTIVITY]/js/loader.js</div><div><div style="color:rgb(212,212,212);background-color:rgb(30,30,30);font-family:"Droid Sans Mono","Courier New",monospace,"Droid Sans Fallback";font-size:14px;line-height:19px;white-space:pre"><div><span style="color:rgb(156,220,254)">requirejs</span>.<span style="color:rgb(220,220,170)">config</span>({</div><div> <span style="color:rgb(156,220,254)">baseUrl:</span> <span style="color:rgb(206,145,120)">"lib"</span>,</div><div> <span style="color:rgb(156,220,254)">paths:</span> {</div><div> <span style="color:rgb(156,220,254)">activity:</span> <span style="color:rgb(206,145,120)">"../js"</span></div><div> },</div><div> <span style="color:rgb(156,220,254)">shim:</span> {</div><div> <span style="color:rgb(206,145,120)">'konva'</span><span style="color:rgb(156,220,254)">:</span> {</div><div> <span style="color:rgb(156,220,254)">exports:</span> <span style="color:rgb(206,145,120)">'Konva'</span></div><div> }</div><div> }</div><div>});</div><br><div><span style="color:rgb(220,220,170)">requirejs</span>([<span style="color:rgb(206,145,120)">"activity/activity"</span>]);</div><br></div></div><div>-----------------------------</div><div><br></div><div>[ACTIVITY]/js/activity.js</div><div><br></div><div><div style="color:rgb(212,212,212);background-color:rgb(30,30,30);font-family:"Droid Sans Mono","Courier New",monospace,"Droid Sans Fallback";font-size:14px;line-height:19px;white-space:pre"><div><span style="color:rgb(220,220,170)">define</span>([<span style="color:rgb(206,145,120)">"sugar-web/activity/activity"</span>], <span style="color:rgb(86,156,214)">function</span> (<span style="color:rgb(156,220,254)">activity</span>) {</div><br><div> <span style="color:rgb(96,139,78)">// Manipulate the DOM only when it is ready.</span></div><div> <span style="color:rgb(220,220,170)">require</span>([<span style="color:rgb(206,145,120)">'domReady!'</span>], <span style="color:rgb(86,156,214)">function</span> (<span style="color:rgb(156,220,254)">doc</span>) {</div><br><div> <span style="color:rgb(96,139,78)">// Initialize the activity.</span></div><div> <span style="color:rgb(156,220,254)">activity</span>.<span style="color:rgb(220,220,170)">setup</span>();</div><br><div> <span style="color:rgb(86,156,214)">var</span> <span style="color:rgb(156,220,254)">stage</span> = <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(78,201,176)">Konva</span>.<span style="color:rgb(78,201,176)">stage</span>({</div><div> <span style="color:rgb(156,220,254)">container:</span> <span style="color:rgb(206,145,120)">'canvas'</span>,</div><div> <span style="color:rgb(156,220,254)">width:</span> <span style="color:rgb(181,206,168)">200</span>,</div><div> <span style="color:rgb(156,220,254)">height:</span> <span style="color:rgb(181,206,168)">200</span></div><div> });</div><br><div> <span style="color:rgb(78,201,176)">console</span>.<span style="color:rgb(220,220,170)">log</span>(<span style="color:rgb(156,220,254)">stage</span>);</div><br><div> <span style="color:rgb(86,156,214)">var</span> <span style="color:rgb(156,220,254)">layer</span> = <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(78,201,176)">Konva</span>.<span style="color:rgb(78,201,176)">layer</span>();</div><br><div> <span style="color:rgb(86,156,214)">var</span> <span style="color:rgb(156,220,254)">circle</span> = <span style="color:rgb(86,156,214)">new</span> <span style="color:rgb(78,201,176)">Konva</span>.<span style="color:rgb(78,201,176)">circle</span>({</div><div> <span style="color:rgb(156,220,254)">x:</span> <span style="color:rgb(156,220,254)">stage</span>.<span style="color:rgb(220,220,170)">getWidth</span>() / <span style="color:rgb(181,206,168)">2</span>,</div><div> <span style="color:rgb(156,220,254)">y:</span> <span style="color:rgb(156,220,254)">stage</span>.<span style="color:rgb(220,220,170)">getHeight</span>() / <span style="color:rgb(181,206,168)">2</span>,</div><div> <span style="color:rgb(156,220,254)">radius:</span> <span style="color:rgb(181,206,168)">70</span>,</div><div> <span style="color:rgb(156,220,254)">fill:</span> <span style="color:rgb(206,145,120)">'red'</span>,</div><div> <span style="color:rgb(156,220,254)">stroke:</span> <span style="color:rgb(206,145,120)">'black'</span>,</div><div> <span style="color:rgb(156,220,254)">strokeWidth:</span> <span style="color:rgb(181,206,168)">4</span></div><div> });</div><br><div> <span style="color:rgb(156,220,254)">layer</span>.<span style="color:rgb(220,220,170)">add</span>(<span style="color:rgb(156,220,254)">circle</span>);</div><br><div> <span style="color:rgb(156,220,254)">stage</span>.<span style="color:rgb(220,220,170)">add</span>(<span style="color:rgb(156,220,254)">layer</span>);</div><div> });</div><br><div>});</div><br></div></div><div><div><br></div><div>But I got Konva is undefined in my console.log() call.</div><div><br></div><div>So, what did I misunderstood ?</div><div><br></div>-- <br><div class="gmail_signature"><div dir="ltr"><div><div dir="ltr">Regards,<br><br>Laurent Bernabé <div><br></div><div><a href="mailto:laurent.bernabe@gmail.com" target="_blank">laurent.bernabe@gmail.com</a></div></div></div></div></div> </div></div>