update codemirror + added position args

This commit is contained in:
Leon van Kammen 2025-01-06 15:57:27 +01:00
parent 6b883721bd
commit 206a6362b1
2 changed files with 67 additions and 57 deletions

View File

@ -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"

View File

@ -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)