bz-slidepane OK + console started + intro loader

app/assets/sfx/intro.js

@@ -23,7 +23,7 @@ class Intro{
             new Promise((resolve, reject) => {
                 new RGBELoader()
                     .setPath('/app/assets/images/')
-                    .load('kloofendal_48d_partly_cloudy_puresky_2k.hdr', resolve, this.hdrProgress, reject)
+                    .load('kloofendal_48d_partly_cloudy_puresky_2k.hdr', resolve, null, reject)
             })
 
         const loadTexture1 = () => 
@@ -45,15 +45,6 @@ class Intro{
         this.Xcorrection = -0.02
     }
 
-    hdrProgress(xhr){
-        const pb = document.querySelector('div.progress')
-        if (xhr.lengthComputable) {
-            const percent = (xhr.loaded / xhr.total) * 100
-            pb.style.width = percent.toFixed(0)
-            if(percent.toFixed(0)>=99) pb.style.display = 'none'
-        } 
-    }
-
     initScene(LoadersResults){ console.log('initScene')
         let hdrTexture
         const [hdrResult, texResultP42, texResultEE] = LoadersResults
@@ -182,11 +173,13 @@ class Intro{
         }) 
 
         this.renderer.render(this.scene, this.camera)
+        document.querySelector('div.loading').style.display = 'none'
         this.canvas.classList.add('ready')
 
     }
 
     launch3DAnim(){ console.log('CSs finished, launching 3D anim')
+        document.getElementById('startbtn').style.display = 'block'
         this.nextAnim = Date.now()
         this.animate()
     }
@@ -228,7 +221,7 @@ class Intro{
         }    
         if (!this.planeEE) {
             const geo = new THREE.PlaneGeometry(planeWidth, planeHeight)
-            this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, alphaTest: 0.01, depthWrite:true, depthTest:true })
+            this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, alphaTest: 0.001, depthWrite:true, depthTest:true })
             this.matEE.defines = this.matEE.defines || {}
             this.matEE.defines.USE_UV = ""
             this.matEE.onBeforeCompile = shader => {

app/assets/styles/intro.css

@@ -1,3 +1,5 @@
+@import '/app/assets/styles/icons.css';
+
 body {
     display: flex; 
     justify-content: center;
@@ -36,14 +38,20 @@ canvas.intro3d.ready{
     40%   { opacity: 0.8; }
     100% { opacity: 1;   }
 }
-.progress{
+@keyframes spin {
-  position: absolute;
+  0% { transform: rotate(0deg) ; }
-  width: 100px;
+  100% { transform: rotate(360deg) ; }
-  height: 2px;
+}
-  background: white;
+.loading{
-  top: 50%;
+    animation: spin 1s infinite linear;
-  left: 50%;
+    font-family: 'glyphs';
-  transform: translate(-50%, -50%);
+    color: #7E6;
+    font-size: 4em;;
+    z-index: 99999;  
+    position:absolute;
+    left:50%;
+    top:50%;
+    transform: translateX(-50%) translateY(-50%);
 }
 
 #startbtn{
@@ -59,8 +67,8 @@ canvas.intro3d.ready{
     box-shadow: 2px 2px 10px #BAFFEF, -2px -2px 10px #BAFFEF, -2px 0 10px #BAFFEF, 0 -2px 10px #BAFFEF;
     animation: startbtnanim 5s ease-out forwards;
     z-index: 99;
+    display: none;
 }
-
 #startbtn[disabled]{
     filter: brightness(.3);
 }

app/thirdparty/buildoz/buildoz.css

@@ -138,39 +138,53 @@ bz-toggler div.toggle-switch span.toggle-thumb.turned-on {
     left : 1em;
 }
 
-bz-slidepane div.handle.top {
+bz-slidepane {
+    display: block;
     position: absolute;
-    top: 0;
+    background-color: #000A;
+    padding: 0 0.5em 0 0.5em;
+}
+bz-slidepane[side="top"] { top:0; left:0; width: 100%; height:0; border-bottom: 2px solid #DDD; }
+bz-slidepane[side="bottom"] { bottom:0; left:0; width: 100%; height:0;  border-top: 2px solid #DDD;}
+bz-slidepane[side="left"] { top:0; left:0; height:100%; width:0; border-right: 2px solid #DDD;}
+bz-slidepane[side="right"] { top:0; right:0; height:100%; width:0; border-left: 2px solid #DDD; }
+bz-slidepane[side="top"] div.handle {
+    position: absolute;
+    bottom: -12px;
     left: 50%;
     width: 40px;
     height: 11px;
     background: repeating-linear-gradient( to top, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
     transform: translateX(-50%);
+    cursor: ns-resize;
 }
-bz-slidepane div.handle.bottom {
+bz-slidepane[side="bottom"] div.handle {
     position: absolute;
-    bottom: 0;
+    top: -12px;
     left: 50%;
     width: 40px;
     height: 11px;
     background: repeating-linear-gradient( to bottom, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
     transform: translateX(-50%);
+    cursor: ns-resize;
 }
-bz-slidepane div.handle.left {
+bz-slidepane[side="left"] div.handle {
     position: absolute;
-    left: 0;
+    right: -12px;
     top: 50%;
     width: 11px;
     height: 40px;
     background: repeating-linear-gradient( to left, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
     transform: translateY(-50%);
+    cursor: ew-resize;
 }
-bz-slidepane div.handle.right {
+bz-slidepane[side="right"] div.handle {
     position: absolute;
-    right: 0;
+    left: -12px;
     top: 50%;
     width: 11px;
     height: 40px;
     background: repeating-linear-gradient( to right, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
     transform: translateY(-50%);
+    cursor: ew-resize;
 }

app/thirdparty/buildoz/buildoz.js

@@ -260,15 +260,32 @@ class BZslidePane extends Buildoz {
         }
         this.dragMove = this.dragMove.bind(this)
         this.dragEnd = this.dragEnd.bind(this)
+        this._observer = new MutationObserver(muts => { // Fill with innerHTML or other DOM manip should not allow coating to be removed
+            console.log('mutation...')
+            this.coat()
+        })
     }
 
     connectedCallback(){
         super.connectedCallback()
+        this.coat()
+        this._observer.observe(this, { childList: true }) // Do this last
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback()
+        this._observer.disconnect()
+    }
+
+    coat(){ console.log('coat')
+        if(this.handle && this.querySelector(this.dispatchEvent.handle)) return
+        this._observer.disconnect()  
+        if(this.querySelector(this.dispatchEvent.handle)) this.querySelector(this.dispatchEvent.handle).remove()
         this.handle = document.createElement('div')
         this.handle.classList.add('handle')
-        this.handle.classList.add(this.getBZAttribute('side'))
         this.prepend(this.handle)
         this.handle.addEventListener('pointerdown', this.dragStart.bind(this))
+        this._observer.observe(this, { childList: true })
     }
 
     dragStart(evt){ 
@@ -280,17 +297,29 @@ class BZslidePane extends Buildoz {
     }
 
     dragMove(evt){
-        const dx = evt.clientX - this.dragStartX
+        const box = this.getBoundingClientRect()
-        const dy = evt.clientY - this.dragStartY
+        const parentBox = this.parentElement.getBoundingClientRect()
-
+        let width, height
         switch(this.getAttribute('side')){
             case 'top':
+                height = (evt.clientY > box.top) ? (evt.clientY - box.top) : 0
+                if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2)
+                this.style.height = height+'px'
                 break
             case 'bottom':
+                height = (evt.clientY < box.bottom) ? (box.bottom - evt.clientY) : 0
+                if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2)
+                this.style.height = height+'px'
                 break
             case 'left':
+                width = (evt.clientX > box.left) ? (evt.clientX - box.left) : 0
+                if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2)
+                this.style.width = width+'px'
                 break
             case'right':
+                width = (evt.clientX < box.right) ? (box.right - evt.clientX) : 0
+                if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2)
+                this.style.width = width+'px'
                 break
         }
     }

app/views/editors/KeyframeView.html

@@ -79,6 +79,21 @@
     .kf-editor bz-select[data-output="keyframesSelector"]{
         margin-top:1em;
     }
+    .kf-editor .kfArena bz-slidepane{
+        font-size:14px;
+    }
+    .kf-editor .kfArena bz-slidepane textarea{
+        border-radius: 0;
+        background: #000A;
+        margin: 0;
+        padding: 0 1em 0 1em;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        border-top: 1px solid white;
+        color: #0F0;
+    }
 </style>
 <div class="kf-editor cols-3">
     <article eiccard class="left-pane">
@@ -96,10 +111,7 @@
     <article eiccard class="kfArena">
         <section>
             <canvas data-output="kfArenaCanvas"></canvas> 
-            <bz-slidepane side="top"></bz-slidepane>
+            <bz-slidepane side="bottom" data-output="console"></bz-slidepane>
-            <bz-slidepane side="bottom"></bz-slidepane>
-            <bz-slidepane side="left"></bz-slidepane>
-            <bz-slidepane side="right"></bz-slidepane>
         </section>
     </article>
     <article eiccard class="agent-properties">

app/views/editors/KeyframeView.js

@@ -63,6 +63,12 @@ class KeyframeView extends WindozDomContent {
         this.outputs.btnSaveKF.disabled = true  
         this.outputs.kfName.addEventListener('keyup', this.updateKfButtons.bind(this))
         this.currentlySelectedAid = null
+        this.output('console',`
+            <div class="results">
+                JS 3D Console. for help, type "help"
+            </div>
+            <textarea type="text" style=""></textarea>            
+        `)
     }
 
     async onChangeAgent(event){

index.html

@@ -20,7 +20,7 @@
 
 <body>
     <canvas class="intro3d"></canvas>
-    <div class="progress"></div>
+    <div class="icon-spinner loading"></div>
     <button id="startbtn">START</button>
     <div id="login-dialog">
         <div class="cols2">