fixed preferences, fixed windows handles

app/assets/styles/app.css

@@ -58,7 +58,7 @@ body[eicapp] {
     height: calc(100vh - var(--eicui-app-toolbar-height-active));
     position: fixed;
     top: var(--eicui-app-toolbar-height-active);
-    z-index: 2;
+    z-index: 99;
 }
 [eicapp] .app-workspace {
     display: grid;
@@ -84,13 +84,11 @@ body[eicapp] {
 [eicapp] > [eicmenu][collapsed]:not(:hover) + .app-workspace{
     padding-left: var(--app-menu-collapsed-width);
 }
-
 [eicapp] .app-workspace .window {
     position: fixed;
     padding: 3px;
     background: var(--app-color-secondary);
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
+    box-shadow: 0 0 20px rgba(147, 255, 255, 0.55);
-    cursor: nwse-resize;
     right: auto;
     bottom: auto;
     overflow: hidden;
@@ -100,11 +98,11 @@ body[eicapp] {
     max-width: 90vw;
     display: flex;
     flex-direction: column;
+    border-radius: .3rem;
 }
 [eicapp] .app-workspace .window.active { 
     z-index: 3; 
     background: var(--app-color-primary);
-    border-radius: .3rem;
 }
 [eicapp] .app-workspace .window > header { 
     flex: 0 0 auto;
@@ -185,6 +183,43 @@ body[eicapp] {
     height: 100%;
 }
 
+[eicapp] .app-workspace .window .handle {
+  position: absolute;
+  z-index: 2;
+}
+[eicapp] .app-workspace .window .handle[data-side="n"] {
+  top: -5px; left: 5px; right: 5px; height: 10px;
+  cursor: n-resize;
+}
+[eicapp] .app-workspace .window .handle[data-side="e"] {
+  top: 5px; right: -5px; bottom: 5px; width: 10px;
+  cursor: e-resize;
+}
+[eicapp] .app-workspace .window .handle[data-side="w"] {
+  top: 5px; left: -5px; bottom: 5px; width: 10px;
+  cursor: w-resize;
+}
+[eicapp] .app-workspace .window .handle[data-side="nw"] {
+  top: -5px; left: -5px; width: 10px; height: 10px;
+  cursor: nw-resize;
+}
+[eicapp] .app-workspace .window .handle[data-side="ne"] {
+  top: -5px; right: -5px; width: 10px; height: 10px;
+  cursor: ne-resize;
+}
+[eicapp] .app-workspace .window .handle[data-side="s"] {
+  bottom: -5px; left: 5px; right: 5px; height: 10px;
+  cursor: s-resize;
+}
+[eicapp] .app-workspace .window .handle[data-side="sw"] {
+  bottom: -5px; left: -5px; width: 10px; height: 10px;
+  cursor: sw-resize;
+}
+[eicapp] .app-workspace .window .handle[data-side="se"] {
+  bottom: -5px; right: -5px; width: 10px; height: 10px;
+  cursor: se-resize;
+}
+
 [eicapp] .app-content-thesaurus {
     position: fixed;
     bottom: 0;

app/controllers/dashboard/DashboardsController.js

@@ -11,7 +11,6 @@ class DashboardsController extends EICController {
      */
     index() {
         const models = {
-            // mailings: new MailingsModel(payload['/mailings'].permissions)
         }
 
         const ttb = new app.LoadedModules.Threetobus()
@@ -19,17 +18,17 @@ class DashboardsController extends EICController {
         const m1 = ttb.buildFromJSON(this.agentDefs.molecule1)
         m1.name = 'agent42'
         ttb.scene.add(m1)
-        setTimeout(() => {
+        // setTimeout(() => {
-            ttb.smoothRelMove({
+        //     ttb.smoothRelMove({
-                object: m1, 
+        //         object: m1, 
-                dX: 5, 
+        //         dX: 5, 
-                dY:0, 
+        //         dY:0, 
-                dZ:0, 
+        //         dZ:0, 
-                delay: 1500, 
+        //         delay: 1500, 
-                easing: 'Quadratic', 
+        //         easing: 'Quadratic', 
-                easingMode: 'InOut',
+        //         easingMode: 'InOut',
-            })
+        //     })
-        },3000)
+        // },3000)
 
         this.loadWindow(
             'visualisers/SpaceView', 

app/libs/EIC/EICController.js

@@ -101,6 +101,14 @@ class EICController extends Controller {
                 </div>
                 </header>
             <section></section>
+            <div class="handle" data-side="nw"></div>
+            <div class="handle" data-side="n"></div>
+            <div class="handle" data-side="ne"></div>
+            <div class="handle" data-side="e"></div>
+            <div class="handle" data-side="se"></div>
+            <div class="handle" data-side="s"></div>
+            <div class="handle" data-side="sw"></div>
+            <div class="handle" data-side="w"></div>
         </div>`);
         if(options.expanded) content.setAttribute('expanded','');
         if(options.windowStyle){

app/libs/EIC/EICDomContent.js

@@ -143,8 +143,7 @@ class EICDomContent extends View {
     resizable(element, onResize) {
         let mouseX, mouseY, offset = 0, offsetY = 0, grab = '';
 
-        // mouse button down over the element
+        element.querySelectorAll(':scope > .handle').forEach(handle => handle.addEventListener('mousedown', onMouseDown))
-        element.addEventListener('mousedown', onMouseDown);
 
         element.querySelector('section').addEventListener('mousedown', onBlockMouseDown);
         
@@ -158,16 +157,14 @@ class EICDomContent extends View {
             event.stopPropagation();
             event.preventDefault();
 
-            if(event.currentTarget.hasAttribute('expanded')) return false;
+            if(event.currentTarget.parentElement.hasAttribute('expanded')) return false;
 
             let limits = element.getBoundingClientRect();
             
             mouseX = event.clientX;
             mouseY = event.clientY;
             
-            grab = '';
+            grab = event.currentTarget.dataset.side
-            grab += (Math.abs(mouseY - limits.y) < Math.abs(mouseY - (limits.bottom))) ? 'n':'s';
-            grab += (Math.abs(mouseX - limits.x) < Math.abs(mouseX - (limits.right))) ? 'e':'w';
 
             offset = element.getBoundingClientRect();
 
@@ -207,11 +204,11 @@ class EICDomContent extends View {
             if(grab.indexOf('s') > -1) { 
                 offset.height = offset.height + dy; 
             }
-            if(grab.indexOf('e') > -1) { 
+            if(grab.indexOf('w') > -1) { 
                 offset.x = offset.x + dx; 
                 offset.width = offset.width - dx; 
             }
-            if(grab.indexOf('w') > -1) { 
+            if(grab.indexOf('e') > -1) { 
                 offset.width = offset.width + dx; 
             }
             

app/libs/myUser.js

@@ -228,7 +228,8 @@ class myUser extends app.LoadedClasses.User {
         if(app.MessageBus) {
             app.MessageBus.requestWssGwAction('GET', { key: `${this.identity.uuid}:userPrefs`})
             .then(settings => {
-                this.preferences = settings.value;
+                console.log("Prefs received from bus:", settings)
+                this.preferences = settings.value || {}
             })
         }