update codemirror + added position args
This commit is contained in:
parent
6b883721bd
commit
206a6362b1
|
@ -1,8 +1,8 @@
|
||||||
#!/bin/sh
|
#!/bin/sh
|
||||||
test -n "$1" || { echo "usage: codemirror <file>"; exit 0; }
|
test -n "$1" || { echo "usage: codemirror <file> <x> <y> <z>"; exit 0; }
|
||||||
|
|
||||||
me="$(dirname $(readlink -f $0))"
|
me="$(dirname $(readlink -f $0))"
|
||||||
file="$(readlink -f "$1")"
|
file="$(readlink -f "$1")"
|
||||||
|
|
||||||
$me/codemirror.js "$file"
|
$me/codemirror.js "$file" $2 $3 $4
|
||||||
echo "press ctrl-Q to exit editor"
|
echo "press ctrl-Q to exit editor"
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
#!/bin/js
|
#!/bin/js
|
||||||
|
|
||||||
if( args[1] == undefined ) return "usage: codemirror <file>"
|
if( args[1] == undefined ) return "usage: codemirror <file>"
|
||||||
|
let keymap = "default" // "vim"
|
||||||
|
|
||||||
if( AFRAME.components.codemirror ) delete AFRAME.components.codemirror
|
if( AFRAME.components.codemirror ) delete AFRAME.components.codemirror
|
||||||
AFRAME.registerComponent('codemirror', {
|
AFRAME.registerComponent('codemirror', {
|
||||||
|
@ -9,6 +9,7 @@ AFRAME.registerComponent('codemirror', {
|
||||||
term: { type:"selector", default: "[isoterminal]" },
|
term: { type:"selector", default: "[isoterminal]" },
|
||||||
width: { type:"number", default:700},
|
width: { type:"number", default:700},
|
||||||
height: { type:"number", default:500},
|
height: { type:"number", default:500},
|
||||||
|
keymap: { type:"string", default:"default"}
|
||||||
},
|
},
|
||||||
|
|
||||||
init: function () {
|
init: function () {
|
||||||
|
@ -40,34 +41,34 @@ AFRAME.registerComponent('codemirror', {
|
||||||
css: (me) => `.CodeMirror{
|
css: (me) => `.CodeMirror{
|
||||||
width: ${me.com.data.width}px !important;
|
width: ${me.com.data.width}px !important;
|
||||||
height: ${me.com.data.height-30}px !important;
|
height: ${me.com.data.height-30}px !important;
|
||||||
}
|
}
|
||||||
.cm-s-shadowfox .CodeMirror-cursor {
|
.cm-s-shadowfox .CodeMirror-cursor {
|
||||||
border-left: 10px solid #a5f !important;
|
border-left: 10px solid #a5f !important;
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
}
|
}
|
||||||
.codemirror *{
|
.codemirror *{
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: "Cousine",Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
|
font-family: "Cousine",Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
|
||||||
font-weight:500 !important;
|
font-weight:500 !important;
|
||||||
letter-spacing: 0 !important;
|
letter-spacing: 0 !important;
|
||||||
text-shadow: 0px 0px 10px #F075;
|
text-shadow: 0px 0px 10px #F075;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wb-body:has(> .codemirror){
|
.wb-body:has(> .codemirror){
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.CodeMirror {
|
.CodeMirror {
|
||||||
margin-top:18px;
|
margin-top:18px;
|
||||||
}
|
}
|
||||||
.cm-s-shadowfox.CodeMirror {
|
.cm-s-shadowfox.CodeMirror {
|
||||||
background:transparent !important;
|
background:transparent !important;
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
},
|
},
|
||||||
|
|
||||||
createEditor: function(value){
|
createEditor: function(value){
|
||||||
this.el.setAttribute("window", `title: codemirror; uid: ${this.el.dom.id}; attach: #overlay; dom: #${this.el.dom.id}; width: ${this.data.width}px; height: ${this.data.height}px; class: no-full, no-resize`)
|
this.el.setAttribute("window", `title: codemirror; uid: ${this.el.dom.id}; attach: #overlay; dom: #${this.el.dom.id}; width: ${this.data.width}px; height: ${this.data.height}px; class: no-full, no-max, no-resize`)
|
||||||
this.editor = CodeMirror( this.el.dom, {
|
this.editor = CodeMirror( this.el.dom, {
|
||||||
value,
|
value,
|
||||||
mode: this.data.file.match(/\.js$/) ? "text/javascript" :
|
mode: this.data.file.match(/\.js$/) ? "text/javascript" :
|
||||||
|
@ -80,6 +81,7 @@ AFRAME.registerComponent('codemirror', {
|
||||||
lineNumbers: true,
|
lineNumbers: true,
|
||||||
styleActiveLine: true,
|
styleActiveLine: true,
|
||||||
matchBrackets: true,
|
matchBrackets: true,
|
||||||
|
keyMap: this.data.keymap,
|
||||||
Tab: "indentMore",
|
Tab: "indentMore",
|
||||||
defaultTab: function(cm) {
|
defaultTab: function(cm) {
|
||||||
if (cm.somethingSelected()) cm.indentSelection("add");
|
if (cm.somethingSelected()) cm.indentSelection("add");
|
||||||
|
@ -92,15 +94,17 @@ AFRAME.registerComponent('codemirror', {
|
||||||
this.el.emit('close',true) // window.js will react accordingly
|
this.el.emit('close',true) // window.js will react accordingly
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.editor.updateFile = AFRAME.utils.throttle( (file,str) => {
|
this.editor.updateFile = (file,str) => {
|
||||||
this.updateFile(file,str)
|
clearTimeout( this.editor.updateFile.tid)
|
||||||
}, 1500)
|
setTimeout( (file,str) => {
|
||||||
|
this.updateFile(file,str)
|
||||||
|
},500, file,str)
|
||||||
|
}
|
||||||
this.editor.on('change', (instance,changeObj) => {
|
this.editor.on('change', (instance,changeObj) => {
|
||||||
this.editor.updateFile( this.data.file, instance.getValue() )
|
this.editor.updateFile( this.data.file, instance.getValue() )
|
||||||
})
|
})
|
||||||
|
|
||||||
this
|
this.handleFocus()
|
||||||
.handleFocus()
|
|
||||||
|
|
||||||
setTimeout( () => {
|
setTimeout( () => {
|
||||||
this.el.setAttribute("html-as-texture-in-xr", `domid: #${this.el.dom.id}`) // only show aframe-html in xr
|
this.el.setAttribute("html-as-texture-in-xr", `domid: #${this.el.dom.id}`) // only show aframe-html in xr
|
||||||
|
@ -137,15 +141,15 @@ AFRAME.registerComponent('codemirror', {
|
||||||
DOMready: function(e){
|
DOMready: function(e){
|
||||||
|
|
||||||
this.isoterminal.worker.read_file(this.data.file)
|
this.isoterminal.worker.read_file(this.data.file)
|
||||||
.then( this.isoterminal.convert.Uint8ArrayToString )
|
.then( this.isoterminal.convert.Uint8ArrayToString )
|
||||||
.then( (str) => {
|
.then( (str) => {
|
||||||
console.log("creating editor: "+this.data.file)
|
console.log("creating editor: "+this.data.file)
|
||||||
this.createEditor( str )
|
this.createEditor( str )
|
||||||
})
|
})
|
||||||
.catch( (e) => {
|
.catch( (e) => {
|
||||||
console.log("error opening "+this.data.file+", creating new one")
|
console.log("error opening "+this.data.file+", creating new one")
|
||||||
this.createEditor("")
|
this.createEditor("")
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -198,33 +202,39 @@ This is a help file which describes the application.
|
||||||
It will be rendered thru troika text, and will contain
|
It will be rendered thru troika text, and will contain
|
||||||
headers based on non-punctualized lines separated by linebreaks,
|
headers based on non-punctualized lines separated by linebreaks,
|
||||||
in above's case "\nHelloworld application\n" will qualify as header.
|
in above's case "\nHelloworld application\n" will qualify as header.
|
||||||
`
|
`
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
AFRAME.utils.require({
|
AFRAME.utils.require({
|
||||||
codemirrorjs: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.js",
|
codemirrorjs: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.58.1/codemirror.js",
|
||||||
codemirrorcss: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css",
|
codemirrorcss: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css",
|
||||||
cmtheme: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/theme/shadowfox.css"
|
cmtheme: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/theme/shadowfox.css"
|
||||||
})
|
})
|
||||||
.then( () => AFRAME.utils.require({
|
.then( () => {
|
||||||
|
|
||||||
|
let extras = {
|
||||||
cmxml: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/xml/xml.js",
|
cmxml: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/xml/xml.js",
|
||||||
cmjavascript: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/javascript/javascript.js",
|
cmjavascript: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/javascript/javascript.js",
|
||||||
cmcss: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/css/css.js",
|
cmcss: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/css/css.js",
|
||||||
cmlua: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/lua/lua.js",
|
cmlua: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/lua/lua.js",
|
||||||
cmpython: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/python/python.js",
|
cmpython: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/python/python.js",
|
||||||
cmmarkdown: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/markdown/markdown.js",
|
cmmarkdown: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/markdown/markdown.js",
|
||||||
highlight: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/htmlmixed/htmlmixed.js",
|
highlight: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/mode/htmlmixed/htmlmixed.js"
|
||||||
})
|
}
|
||||||
)
|
if( keymap == "vim" ) extras.cmvim = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/keymap/vim.js";
|
||||||
|
return AFRAME.utils.require(extras)
|
||||||
|
})
|
||||||
.then( () => {
|
.then( () => {
|
||||||
let el = document.createElement("a-entity")
|
let el = document.createElement("a-entity")
|
||||||
el.setAttribute("codemirror", `file: ${args[1]}`)
|
el.setAttribute("codemirror", `file: ${args[1]}`)
|
||||||
document.querySelector("a-scene").appendChild(el)
|
if( args.length == 5 ){
|
||||||
|
el.setAttribute("position",`${args[2]} ${args[3]} ${args[4]}`)
|
||||||
|
}
|
||||||
|
document.querySelector("a-scene").appendChild(el)
|
||||||
})
|
})
|
||||||
|
|
||||||
return "" // empty stdout(put)
|
|
||||||
|
|
||||||
// for shellscript-equivalent see bin/codemirror
|
return "" // empty stdout(put)
|
||||||
|
|
Loading…
Reference in New Issue