From 5240ab9ff952da88ada2a40002c3b8ac18cb8dde Mon Sep 17 00:00:00 2001 From: Fabien Benetou Date: Wed, 24 May 2023 17:51:35 +0200 Subject: [PATCH] split --- index.html | 121 +++++++++++++++++++++++++++++------------------------ 1 file changed, 66 insertions(+), 55 deletions(-) diff --git a/index.html b/index.html index 6a66fcd..ee3d7db 100644 --- a/index.html +++ b/index.html @@ -2214,27 +2214,23 @@ function startExperience(){ document.querySelector("#mainbutton").style.display = "none" } +let codeEditor // should consider multiple instances instead -let codeEditor = { - element: null, - line: 0, - page: null, - startWindowRange: 0, - lengthWindowRange: 20, - scrollInterval: null, - currentlyDisplayedText: "", - caret: null, - language: null, -} - -function nextLineCodeEditor(lines=1){ // can be negative to scroll up +let editors = [] +// track created editors then apply actions to the currently selected one +// problems happen when relying on querySelector/getElementById rather than a specific editor + // do these based on codeEditor.element rather than document +// still probably problematic for interactions + // consider for now only the currentEditor + +function nextLineCodeEditor(codeEditor, lines=1){ // can be negative to scroll up if (codeEditor.line+lines < 0) return codeEditor.line+=lines let content=codeEditor.page.split("\n").slice(codeEditor.line,codeEditor.line+codeEditor.lengthWindowRange).join("\n"); codeEditor.currentlyDisplayedText=content codeEditor.element.setAttribute("troika-text", {value: content}) if (codeEditor.language) codeEditor.element.setAttribute("troika-text", {colorRanges: highlight(content, language='javascript')}) - let gutterEl = document.getElementById("leftgutter") + let gutterEl = codeEditor.element.querySelector(".leftgutter") if (gutterEl){ let lineNumbers = "\n" for (let i=codeEditor.line+1;i<=codeEditor.line+codeEditor.lengthWindowRange;i++){ @@ -2245,7 +2241,7 @@ function nextLineCodeEditor(lines=1){ // can be negative to scroll up gutterEl.setAttribute("troika-text", {value: lineNumbers}) } - let rightGutterEl = document.getElementById("rightgutter") + let rightGutterEl = codeEditor.element.querySelector(".rightgutter") if (rightGutterEl){ b = rightGutterEl.parentElement.object3D.children[0]._textRenderInfo.blockBounds w = b[2]-b[0] @@ -2257,23 +2253,23 @@ function nextLineCodeEditor(lines=1){ // can be negative to scroll up } } -function nextPageCodeEditor(){ - nextLineCodeEditor(codeEditor.lengthWindowRange) +function nextPageCodeEditor(codeEditor, ){ + nextLineCodeEditor(codeEditor, codeEditor.lengthWindowRange) } -function previousPageCodeEditor(){ - nextLineCodeEditor(-codeEditor.lengthWindowRange) +function previousPageCodeEditor(codeEditor, ){ + nextLineCodeEditor(codeEditor, -codeEditor.lengthWindowRange) } -function stopScrollCodeEditor(){ +function stopScrollCodeEditor(codeEditor, ){ codeEditor.scrollInterval = clearInterval( codeEditor.scrollInterval ) } -function startScrollCodeEditor(){ - if (!codeEditor.scrollInterval) codeEditor.scrollInterval = setInterval( _ => nextLineCodeEditor(), 100) +function startScrollCodeEditor(codeEditor, ){ + if (!codeEditor.scrollInterval) codeEditor.scrollInterval = setInterval( _ => nextLineCodeEditor(codeEditor, ), 100) } -function highlightAllOccurences(keyword="function"){ +function highlightAllOccurences(codeEditor, keyword="function"){ let indices = [] let lastfound = codeEditor.currentlyDisplayedText.indexOf(keyword,0) while (lastfound>-1) { @@ -2287,7 +2283,7 @@ function highlightAllOccurences(keyword="function"){ }) } -function hightlightNextKeyword(keyword="function"){ +function hightlightNextKeyword(codeEditor, keyword="function"){ let pos = codeEditor.currentlyDisplayedText.indexOf(keyword) // invisible characters... some still left let offset = (codeEditor.currentlyDisplayedText.slice(0,pos).match(/[\n\t ]/g)||[]).length @@ -2295,13 +2291,13 @@ function hightlightNextKeyword(keyword="function"){ highlightString(pos, keyword.length) } -function highlightString(pos, length){ - for (let c=pos;c { el.object3D.children[0].addEventListener("synccomplete", e => { // this can be used for resizing but without add the element - if (document.getElementById("leftgutter")) return // already added, should unregister + if (codeEditor.element.querySelector(".leftgutter")) return // already added, should unregister b = el.object3D.children[0]._textRenderInfo.blockBounds w = b[2]-b[0] @@ -2405,10 +2401,10 @@ function addBackdropToTroikaElement( el ){ }) } -function addGuttersToTroikaElement( el ){ +function addGuttersToTroikaElement( codeEditor, el ){ el.addEventListener("object3dset", e => { el.object3D.children[0].addEventListener("synccomplete", e => { - if (document.getElementById("leftgutter")) return + if (codeEditor.element.querySelector(".leftgutter")) return // already added, should unregister, can be removed to allow dynamic resizing BUT should skip adding element b = el.object3D.children[0]._textRenderInfo.blockBounds @@ -2421,7 +2417,6 @@ function addGuttersToTroikaElement( el ){ m = new THREE.MeshBasicMaterial( {color: 0x333333, opacity: 0.9, transparent: true} ); c = new THREE.Mesh( g, m ); el.object3D.add( c ); - c.name = "leftgutter" c.position.z=-.01 c.position.x= -gutterWidth/2 //c.rotation.y= .2 // looks nice but have to consider text on top first, could apply rotation to text too @@ -2438,7 +2433,7 @@ function addGuttersToTroikaElement( el ){ lineNumbers.slice(0,-1) leftGutter.setAttribute("troika-text", {value: lineNumbers}) leftGutter.setAttribute("troika-text", {textIndent: -.5}) - leftGutter.id = "leftgutter" + leftGutter.className = "leftgutter" codeEditor.element.appendChild( leftGutter ) // should be updated when scrolling @@ -2447,19 +2442,18 @@ function addGuttersToTroikaElement( el ){ m = new THREE.MeshBasicMaterial( {color: 0x333333, opacity: 0.9, transparent: true} ); c = new THREE.Mesh( g, m ); el.object3D.add( c ); - c.name = "rightgutter" c.position.z=-.01 c.position.x= w+gutterWidth/2 //c.rotation.y= -.2 // looks nice but have to consider text on top first var rightGutter = document.createElement("a-cylinder") // height proportional to the visible content to the terminal size - let scrollBarHeight = codeEditor.lengthWindowRange/getNumberOfLinesFromCodeEditor() * h - let scrollBarVerticalOffset = codeEditor.line/getNumberOfLinesFromCodeEditor() * h + let scrollBarHeight = codeEditor.lengthWindowRange/getNumberOfLinesFromCodeEditor(codeEditor, ) * h + let scrollBarVerticalOffset = codeEditor.line/getNumberOfLinesFromCodeEditor(codeEditor, ) * h if (scrollBarHeight < .1) scrollBarHeight = .1 rightGutter.setAttribute("height", scrollBarHeight ) rightGutter.setAttribute("radius", .01 ) - rightGutter.id = "rightgutter" + rightGutter.className = "rightgutter" // should become a constrained target (moving only on y axis and clamped) codeEditor.element.appendChild( rightGutter ) // so... rightgutter vs rightGutter ... somehow changing to the "correct" one breaks the editor itself (?!) @@ -2472,7 +2466,6 @@ function addGuttersToTroikaElement( el ){ m = new THREE.MeshBasicMaterial( {color: 0x333333, opacity: 0.9, transparent: true} ); c = new THREE.Mesh( g, m ); el.object3D.add( c ); - c.name = "middlegutter" c.position.z=-.01 c.position.y= -h/2-gutterHeight/2 c.position.x= w/2 @@ -2484,7 +2477,7 @@ function addGuttersToTroikaElement( el ){ middleGutter.setAttribute("outline-color", "black" ) middleGutter.setAttribute("troika-text", {value: ":(will add commands here)"}) //middleGutter.setAttribute("troika-text", {textIndent: -.3}) - middleGutter.id = "middlegutter" + middleGutter.className = "middlegutter" codeEditor.element.appendChild( middleGutter ) middleGutter.object3D.position.y= -h/2-gutterHeight/2 // should disable the overlay first, see parseKeys @@ -2517,7 +2510,7 @@ function addGuttersToTroikaElement( el ){ }) } -function getNumberOfLinesFromCodeEditor(){ +function getNumberOfLinesFromCodeEditor(codeEditor, ){ let newLines = codeEditor.page.match(/\n/g) if (!newLines) return 1 // undefined or 0 return newLines.length @@ -2528,6 +2521,17 @@ function getNumberOfLinesFromCodeEditor(){ // should also support clipboard or even a more direct way to have impact // could save remotely (e.g wiki) or locally in localStorage function addCodeEditor(page="jxr console.log('hello world')", language="javascript", position="-.5 1.6 -.7", name="codeditor" ){ + let codeEditor = { + element: null, + line: 0, + page: null, + startWindowRange: 0, + lengthWindowRange: 20, + scrollInterval: null, + currentlyDisplayedText: "", + caret: null, + language: null, + } // could also add empty but with column and row for sizing // for now supporting only 1 scode editor, despite the name parameter @@ -2550,7 +2554,7 @@ function addCodeEditor(page="jxr console.log('hello world')", language="javascri codeEditor.page = forcedLines codeEditor.line = codeEditor.startWindowRange - let numberOfLines = getNumberOfLinesFromCodeEditor() + let numberOfLines = getNumberOfLinesFromCodeEditor(codeEditor, ) if (numberOfLinesr.text()).then( page => { addCodeEditor( page, '', '-0.22 1.4 -.4' ) }) + + fetch( 'https://webdav.benetou.fr/fot-demo-day/mobydick-extract.txt').then(r=>r.text()).then( src => { + let parts = 4 // can't handle odd splits... + let pl = src.length/parts + for (let n=0; n