import ace from 'ace-builds/src-noconflict/ace'
// lui est nécessaire pour nos options
import aceLangTools from 'ace-builds/src-noconflict/ext-language_tools'
// avec ça on a pas besoin d'autres imports, ils fonctionneront dynamiquement
// import 'ace-builds/webpack-resolver'
// mais la ligne qui précède ne fonctionne qu'avec webpack, pas vite
// faut donc préciser ça
// cf https://github.com/ajaxorg/ace/issues/4906#issuecomment-1226721227
import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/ext-prompt'
import 'ace-builds/src-noconflict/theme-tomorrow_night_bright'
import { stringify } from 'sesajstools'
import { ceIn, addText, empty, ce } from 'src/kernel/dom'
import { getStr } from 'src/kernel/kernel'
import { mtgCompleter } from 'src/uiCommands/autocomplete'
import { initDom } from 'src/uiCommands/common'
import { getCodeFromDom, safeEval } from 'src/uiCommands/javascriptDriver'
import $ from 'jquery'
import { saveAs } from 'file-saver'
/** Les méthode de console que l'on autorise dans notre éditeur */
const exposedConsoleMethods = ['log', 'debug', 'error', 'info', 'warn']
/** les méthodes de console que l'on affiche dans l'output (si le code de mtgApp fait du console.warn ça ira sur la page mais pas s'il utilise console.log ou console.debug) */
const bindedConsoleMethods = ['error', 'warn']
const defaultContent = `// (les objets globaux Math, Number et console sont disponibles, mais pas window)
// const a = addPointXY(3, 3, 'A')
`
const exemple1 = `
const a = addPointXY(-3, 2, 'A', 'red', 'X') \nconst b = addFreePoint(3, -5, 'B', 'blue', 'O')\nconst d = addLineAB(a, b, 'd', 'green', '.', 3)`
/**
* Ajoute une console js pour piloter mtgAppLecteurApi dans container
* @param {MtgAppLecteurApi} mtgAppLecteurApi
* @param {MtgOptions} mtgOptions
*/
async function loadJavascriptEditor (mtgAppLecteurApi, mtgOptions) {
const { divEditorRmq, divEditor, divEditorActions, divEditorOutput, hideFig, resetFig } = await initDom(mtgAppLecteurApi, mtgOptions)
// on init le coté code
divEditorRmq.innerHTML = getStr('apiCodeInfo1')
let { javascriptCode, javascriptCodeId } = mtgOptions
if (javascriptCodeId) {
javascriptCode = getCodeFromDom(javascriptCodeId)
}
if (!javascriptCode) {
const divFileManager = ce('div', {
class: 'mtgActions' // Pour correctement aliger les boutons
})
divFileManager.style.paddingBottom = '10px'
divEditorRmq.parentElement.insertBefore(divFileManager, divEditorRmq)
let form = ceIn(divFileManager, 'form')
const fileInput = ceIn(form, 'input', {
type: 'file',
id: 'fileinput',
accept: '.js,text/*',
class: 'mtgUiFileInput'
})
const label = ceIn(form, 'label', {
for: 'fileinput',
class: 'mtgUiFileLabel',
})
$(label).html(getStr('apiOpenCode'))
const labelInf = ceIn(form, 'label')
fileInput.addEventListener('change', function () {
if (confirm(getStr('apiCodeReplaceConfirm'))) {
const file = fileInput.files[0]
if (!file) {
labelInf.innerHTML = ''
return
}
labelInf.innerHTML = ' ' + file.name
const reader = new FileReader()
reader.onload = function (event) {
editor.setValue(event.target.result)
}
reader.readAsText(file)
}
})
form = ceIn(divFileManager, 'form')
// Un autre bouton pour enregistrer la figure
const buttonSave = ceIn(form, 'button', {
class: 'mtgUiFileLabel'
}, getStr('apiSaveCode'))
buttonSave.addEventListener('click', (evt) => {
evt.preventDefault() // Important car sinon les options de la barre d'URL seront supprimées
const text = editor.getValue()
let inputName = fileInput?.files[0]?.name
// On retire les éventuels (chiffre) de la fin
if (inputName) inputName = inputName.replaceAll(/[ ]+\(\d+\)/g, '').trim()
const filename = inputName ?? 'mtgJSCode.js'
const blob = new Blob([text], { type: 'text/plain;charset=utf-8' })
saveAs(blob, filename)
labelInf.innerHTML = '' // On ne peut pas savoir quel a été le nom effectivement choisi pour le fichier
})
}
const initialJsCode = javascriptCode || defaultContent
addText(divEditorOutput, getStr('apiCodeOutput'))
ceIn(divEditorOutput, 'br')
const jsOutput = ceIn(divEditorOutput, 'div')
jsOutput.classList.add('mtgUiCommandsOutput')
const addLineInfo = (error) => {
if (error.stack) {
const line = error.stack.split('\n').find(l => /at safeEval/.test(l))
const chunks = /<anonymous>:(\d+):(\d+)/.exec(line)
if (chunks) {
const lineNb = Number(chunks[1]) - 4
return ` (at line ${lineNb}:${chunks[2]})`
}
}
return ''
}
const output = (name, ...args) => {
const fakeErr = new Error('trace')
for (const arg of args) {
const content = arg instanceof Error
? String(arg) + addLineInfo(arg)
: (typeof arg === 'string' ? arg : stringify(arg, 2)) + addLineInfo(fakeErr)
ceIn(jsOutput, 'p', content)
}
// et on sort aussi dans la vraie console
realConsole[name](...args)
}
// const realConsole = console // marchera pas car on réaffecte console[m]
const realConsole = {}
const fakedConsole = {}
for (const name of exposedConsoleMethods) {
realConsole[name] = console[name]
fakedConsole[name] = output.bind(null, name)
}
// bouton reset exemple
const resetLabel = javascriptCode ? getStr('apiCodeReset') : getStr('apiCodeResetEx')
const resetCode = javascriptCode ?? defaultContent + exemple1
const confirmMsg = javascriptCode ? getStr('apiCodeResetInitConfirm') : getStr('apiCodeResetExConfirm')
const exButton = ceIn(divEditorActions, 'button')
exButton.appendChild(document.createTextNode(resetLabel))
exButton.addEventListener('click', () => {
if (confirm(confirmMsg)) {
editor.setValue(resetCode)
}
})
if (!javascriptCode) {
// bouton reset
const resetButton = ceIn(divEditorActions, 'button')
resetButton.appendChild(document.createTextNode(getStr('apiErase')))
resetButton.addEventListener('click', () => {
if (confirm(getStr('apiCodeResetConfirm'))) {
editor.setValue(initialJsCode)
}
})
}
// bouton exec
const execButton = ceIn(divEditorActions, 'button')
execButton.appendChild(document.createTextNode(getStr('apiCodeExec')))
execButton.addEventListener('click', async () => {
try {
empty(jsOutput)
await hideFig({ delay: 500 })
await resetFig()
const code = editor.getValue()
// on veut que les appels de console des méthodes de mtgApp causent aussi dans fakeConsole
for (const m of bindedConsoleMethods) {
console[m] = fakedConsole[m]
}
safeEval(mtgAppLecteurApi, code, fakedConsole)
// et on restaurera la vraie console quand l'affichage sera terminé
mtgAppLecteurApi.addFunctionToQueue(function restoreConsole () {
for (const m of bindedConsoleMethods) {
console[m] = realConsole[m]
}
})
} catch (error) {
console.error(error)
}
})
// éditeur
ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl)
const editor = ace.edit(divEditor)
mtgAppLecteurApi.editor = editor // Utilisé dans unload de index.js
mtgAppLecteurApi.javascript = true // Utilisé dans unload de index.js
// penser à changer l'import si on change ce theme
editor.setTheme('ace/theme/tomorrow_night_bright')
const session = editor.getSession()
session.setMode('ace/mode/javascript')
editor.setOptions({
enableBasicAutocompletion: true,
// enableSnippets: true,
enableLiveAutocompletion: true,
wrap: 'free'
})
// Si on n'a pas passé de code on récupère le code précédent qui a été stocké dans localStorage
if (javascriptCode) {
editor.setValue(javascriptCode)
} else {
const code = localStorage.getItem('javascriptCode')
if (code) editor.setValue(code)
else editor.setValue(initialJsCode)
}
// on ne veut pas du warning "missing semicolon"
if (session.$worker) session.$worker.send('changeOptions', [{ asi: true }])
// pour l'autocompletion
aceLangTools.addCompleter(mtgCompleter)
// on donne le focus
editor.focus()
// il faut aller à la fin du fichier sinon tout reste sélectionné et taper qqchose remplace le tout
editor.navigateFileEnd()
// et si on a fourni javascriptCode on lance un 1er rendu
if (javascriptCode) {
// mais faut attendre qu'il ait chargé sa figure initiale
await mtgAppLecteurApi.ready()
try {
const code = editor.getValue()
safeEval(mtgAppLecteurApi, code, fakedConsole)
} catch (error) {
console.error(error)
}
}
}
export default loadJavascriptEditor