console API starts to work...

app/views/editors/KeyframeView.html

@@ -87,6 +87,7 @@
         height: 100%;
         display: grid;
         grid-template-rows: auto minmax(3em, 30%);
+        padding: 0.2em 0.2em 0 0.2em;
     }
     .kf-editor .kfArena bz-slidepane div.commandline{
         grid-template-columns: auto 3em;
@@ -105,6 +106,24 @@
         border-radius: 10px;
         max-height: 3em;
     }
+    .kf-editor .kfArena .inner-console .results{
+        max-height: 100%;
+        overflow: scroll;
+    }
+
+    .kf-editor .kfArena .inner-console .results h1{
+        font-size: 1.5em;
+        margin: 0;
+        padding: 0 .5em 0 .5em;
+        background-color: #473;
+        color: white;
+    }
+    .kf-editor .kfArena .inner-console .results .error{
+        border-top: 1px solid red;
+        border-bottom: 1px solid red;
+        background-color: #FDD;
+        color: black;
+    }
 </style>
 <div class="kf-editor cols-3">
     <article eiccard class="left-pane">
@@ -125,10 +144,13 @@
             <bz-slidepane side="bottom" data-output="console">
                 <div class="inner-console">
                     <div class="results" data-output="results">
-                        JS 3D Console. for help, type "help"
+                        <div class="title">Javascript Keyframe console</div>
+                        Special commands:<br>
+                        "&#92;help" for help & API<br>
+                        "&#92;clear" to clear results<br>
                     </div>
                     <div class="cols-2 commandline">
-                        <textarea type="text" data-output="commands"></textarea>   
+                        <textarea type="text" data-output="commands" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea>   
                         <button eicbutton class="icon-play" data-trigger="execCommand"></button>
                     </div>      
                 </div>                

app/views/editors/KeyframeView.js

@@ -67,13 +67,62 @@ class KeyframeView extends WindozDomContent {
 
     async execCommand(event){
         console.log('cmd:', this.outputs.commands)
-        if(this.outputs.commands.trim()=='help'){
-            this.outputs.results.innerHTML = `
-                Type any javascript at your own risks.
-                To create an agent : this.newAgent(type, properties)
-            `
+        if(this.outputs.commands.value.trim()=='\\help'){
+            this.outputs.results.innerHTML += await app.Assets.loadHtml({ name: 'help/KFconsoleHelp.html' })
+        } else if(this.outputs.commands.value.trim()=='\\clear'){
+            this.outputs.results.innerHTML = ''
         } else {
-            this.kfArena.evalCmd(this.outputs.commands)
+            this.outputs.results.innerHTML += await this.evalCmd(this.outputs.commands.value)
+        }
+        const lines = this.outputs.results.querySelectorAll('div.line')
+        if(lines.length > 100) {
+            for(let i=0; i<(lines.length-100); i++) lines[i].remove()
+        }
+
+    }
+
+    async evalCmd(code){
+        const api = {
+            newAgent: async (type, properties) => {
+                if(Array.from(this.outputs.agentsSelector.options).find(item => item.value==type)){
+                    this.outputs.agentsSelector.value = type
+                    await this.onChangeAgent()
+                    const defaultValues = this.getFieldsValues('div[data-output="agentProperties"]')
+                    return(this.newAgent(type, { ...defaultValues, ...properties })) //TODO: deepMerge
+                } else {
+                    throw(`Invalid agent type: ${type}`)
+                }
+            },
+            removeAgent: (aid) => {
+
+            },
+            updateAgent: (aid, properties) => {
+
+            },
+        }
+        try {
+            const fn = new Function(...Object.keys(api), `
+                return(
+                    (async () => { 
+                        const logs = []
+                        const log = (item) => { logs.push(item) }
+                        ${code}
+                        return(logs)                    
+                    })()
+                )
+            `)
+
+            const res = await fn(...Object.values(api))
+            return(
+                '<div class="line">'+
+                res.map(item => { 
+                    if(typeof(item) == 'object') return(JSON.stringify(item))
+                    return(item)
+                }).join('</div><div class="line">')
+                +'</div>'
+            )
+        } catch (err) {
+            return(`<div class="error">${err.name}: ${err.message}</div>`)
         }
     }