Add scriptconsole components. Clean up atlasmaker a bit

package.json

@@ -58,7 +58,7 @@
     "multer": "^1.4.2",
     "mustache-express": "^1.3.0",
     "neuroweblab": "github:neuroanatomy/neuroweblab",
-    "nwl-components": "^0.0.20",
+    "nwl-components": "^0.0.21",
     "pako": "^1.0.11",
     "passport": "^0.4.1",
     "passport-github": "^1.1.0",

templates/project.mustache

@@ -141,11 +141,14 @@
                             </ButtonsGroup>
                         </Row>
                         <Row>
-                            <Chat
-                                v-if="displayChat"
-                                :receivedMessages="receivedMessages"
-                                :notification="notification"
-                                @send-message="sendChatMessage" />
+                            <div class="text">
+                                <Chat
+                                    v-if="displayChat"
+                                    :receivedMessages="receivedMessages"
+                                    :notification="notification"
+                                    @send-message="sendChatMessage" />
+                                <ScriptConsole v-if="displayScript"/>
+                            </div>
                         </Row>
                     </template>
                     <template v-slot:content>
@@ -180,6 +183,14 @@
         padding: 10px;
         width: 200px;
     }
+    .text {
+        opacity: 0.5;
+        width: 100%;
+        height: 100%;
+    }
+    .text:hover {
+        opacity: 1;
+    }
     </style>
     <script src="/lib/atlasmaker.js"></script>
     <script src="/lib/brainbox.js"></script>

test/integration/client.js

@@ -89,12 +89,13 @@ describe('TESTING CLIENT-SIDE RENDERING', function () {
     // OPEN PROJECT PAGE
     it('Project page renders as expected', async function () {
       await page.goto(U.serverURL + '/project/' + U.projectTest.shortname);
-      await page.waitForSelector('#sliderBlock');
-      await page.waitForSelector('#buttonsBlock');
-      await page.waitForSelector('#penSizeBlock');
+      await page.waitForSelector('.editor .tools');
+      await page.waitForSelector('.editor .tools .range-slider');
+      await page.waitForSelector('.editor .tools button[title="Change pen size to 1"]');
+      await page.waitForSelector('.editor .tools button[title="Change pen size to 15"]');
       await page.waitForSelector('canvas');
-      await page.waitForSelector('#notificationsBlock');
-      await page.waitForSelector('#textInputBlock');
+      await page.waitForSelector('.editor .tools .notifications');
+      await page.waitForSelector('.editor .tools .chat input[type=text]');
 
       const annotation = await page.waitForSelector('#volAnnotations tbody tr td:first-child');
       assert.equal('Cerebrum', await page.evaluate((el) => el.textContent, annotation));

view/atlasmaker/src/atlasmaker.js

@@ -332,23 +332,15 @@ var me = {
     me._createOffscreenCanvases();
     me._createOnscreenCanvases(elem);
 
+    // load tools
+    me.loadTools();
+
     // event connect: Configure mouse events for desktop computers
     // (touch events are configured in the initCursor function)
     me.canvas.onmousedown = me.mousedown;
     me.canvas.onmousemove = me.mousemove;
     me.canvas.onmouseup = me.mouseup;
 
-
-    // text input
-    Promise.all([
-      me.loadScript('https://unpkg.com/codeflask/build/codeflask.min.js'),
-      me.loadScript('https://cdn.jsdelivr.net/gh/r03ert0/[email protected]/consolita.js')
-    ]).then(() => {
-      window.onload = () => {
-        Consolita.init('#logScript');
-      };
-    });
-
     // long-press event
     me.loadScript('https://cdn.jsdelivr.net/gh/john-doherty/[email protected]/dist/long-press-event.min.js')
       .then(() => {