@jscad/web 2.5.5 → 2.5.9

package/examples/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.3.3](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/examples@2.3.2...@jscad/examples@2.3.3) (2022-04-03)
+
+**Note:** Version bump only for package @jscad/examples
+
+
+
+
+
 ## [2.3.2](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/examples@2.3.1...@jscad/examples@2.3.2) (2022-02-19)
 
 **Note:** Version bump only for package @jscad/examples

package/examples/README.md

@@ -32,8 +32,8 @@ Install this package if you need access to the various examples.
 
 ## Documentation
 
-- [JSCAD User Guide](https://www.openjscad.xyz/guide.html)
-- [JSCAD API Reference](https://www.openjscad.xyz/docs)
+- [JSCAD User Guide](https://openjscad.xyz/guide.html)
+- [JSCAD API Reference](https://openjscad.xyz/docs/)
 
 ## Contributing
 
@@ -42,11 +42,11 @@ We welcome and encourage anyone to pitch in but please take a moment to read the
 
 * If you want to submit a bug report please make sure to follow the [Reporting Issues](https://github.com/jscad/OpenJSCAD.org/wiki/Reporting-Issues) guide. Bug reports are accepted as [Issues](https://github.com/jscad/OpenJSCAD.org/issues/) via GitHub.
 
-* If you want to submit a change or a patch, please read the [Contributing Guide](../../CONTRIBUTING.md) . New contributions are accepted as [Pull Requests](https://github.com/jscad/OpenJSCAD.org/pulls/) via GithHub.
+* If you want to submit a change or a patch, please read the [Contributing Guide](../../CONTRIBUTING.md). New contributions are accepted as [Pull Requests](https://github.com/jscad/OpenJSCAD.org/pulls/) via GitHub.
 
 * We only accept bug reports and pull requests on **GitHub**.
 
-* If you have a question about how to use JSCAD, then please start a conversation at the [JSCAD User Group](https://openjscad.xyz/forum.html). You might find the answer in the [JSCAD User Guide](https://www.openjscad.xyz/guide.html).
+* If you have a question about how to use JSCAD, then please start a conversation at the [JSCAD User Group](https://openjscad.xyz/forum.html). You might find the answer in the [JSCAD User Guide](https://openjscad.xyz/guide.html).
 
 * If you have a change or new feature in mind, please start a conversation with the [Core Developers](https://openjscad.xyz/forum.html) and start contributing changes.
 

package/examples/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@jscad/examples",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "Example Files for JSCAD",
+  "homepage": "https://openjscad.xyz/",
   "repository": "https://github.com/jscad/OpenJSCAD.org",
   "scripts": {},
   "contributors": [

package/locales/de.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"Experimenteles caching von Geometrie,",
   "timeout for generation":"Abfallzeit für generieren von Soliden (ms)",
 
-  "Storage":"Speicher",
-  "settings storage path":"Dateipfad für Einstellungen",
-
-  "File Handling":"File Handling",
-  "enable conversion to scripts":"Convert external formats to JSCAD scripts",
-
   "Shortcuts":"Tastenkombinationen",
 
   "Command":"Befehl",

package/locales/en.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"Enable Experimental Geometry Caching, ",
   "timeout for generation":"Timeout for Solid Generation (ms)",
 
-  "Storage": "Storage",
-  "settings storage path":"Storage path of settings",
-
-  "File Handling": "File Handling",
-  "enable conversion to scripts":"Convert external formats to JSCAD scripts",
-
   "Shortcuts":"Keyboard Shortcuts",
 
   "Command":"Command",

package/locales/fr.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"Systeme de cache experimental de la geometrie",
   "timeout for generation": "Timeout génération de solides (ms)",
 
-  "Storage":"Stockage",
-  "settings storage path":"Chemin de stockage des paramètres",
-
-  "File Handling": "File Handling",
-  "enable conversion to scripts":"Convert external formats to JSCAD scripts",
-
   "Shortcuts":"Racourcis Clavier",
 
   "Command":"Commande",

package/locales/hr.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"Omogući eksperimentalno cachiranje geometrije, ",
   "timeout for generation":"Timeout za generiranje modela (ms)",
 
-  "Storage": "Spremanje",
-  "settings storage path":"Putanja za spremanje postavki",
-
-  "File Handling": "Obrada datoteka",
-  "enable conversion to scripts":"Prevedi vanjske formate u JSCAD skripte",
-
   "Shortcuts":"Kratice za tipkovnicu",
 
   "Command":"Komanda",

package/locales/ja.json

@@ -14,12 +14,6 @@
   "enable geometry caching":"experimental geometry caching",
   "timeout for generation":"図形の生成タイムアウト",
 
-  "Storage": "ストレージ",
-  "settings storage path":"ストレージ パス",
-
-  "File Handling":"ファイル処理",
-  "enable conversion to scripts":"外部形式をスクリプトに変換",
-
   "Shortcuts":"キーボード ショートカット",
 
   "Command":"コマンド",

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@jscad/web",
-  "version": "2.5.5",
+  "version": "2.5.9",
   "description": "Web Application for JSCAD",
+  "homepage": "https://openjscad.xyz/",
   "repository": "https://github.com/jscad/OpenJSCAD.org",
   "main": "src/index.js",
   "unpkg": "dist/jscad-web.min.js",
@@ -34,18 +35,18 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@jscad/array-utils": "2.1.2",
-    "@jscad/core": "2.5.5",
-    "@jscad/examples": "2.3.2",
-    "@jscad/io": "2.2.5",
-    "@jscad/modeling": "2.8.0",
-    "@jscad/regl-renderer": "2.5.5",
+    "@jscad/array-utils": "2.1.4",
+    "@jscad/core": "2.5.9",
+    "@jscad/examples": "2.3.4",
+    "@jscad/io": "2.3.2",
+    "@jscad/modeling": "2.9.3",
+    "@jscad/regl-renderer": "2.5.9",
     "@most/create": "2.0.1",
     "brace": "0.11.1",
-    "codemirror": "5.57.0",
+    "codemirror": "5.65.2",
     "es2015-i18n-tag": "1.6.1",
-    "file-saver": "2.0.2",
-    "is-electron": "2.2.0",
+    "file-saver": "2.0.5",
+    "is-electron": "2.2.1",
     "morphdom": "2.6.1",
     "most": "1.8.0",
     "most-proxy": "3.3.0",
@@ -58,7 +59,7 @@
     "browserify": "16.5.1",
     "budo": "11.6.4",
     "copy-dir": "1.3.0",
-    "docblock": "0.4.4",
+    "docblock": "0.4.5",
     "uglifyify": "5.0.2"
   },
   "collective": {
@@ -66,5 +67,5 @@
     "url": "https://opencollective.com/openjscad",
     "logo": "https://opencollective.com/openjscad/logo.txt"
   },
-  "gitHead": "92fb9c75eb070fca5f5ee8c2bab6614b1f54514e"
+  "gitHead": "85fa1fcdfb2d516a201ecf31da242e64b5b3274e"
 }

package/src/ui/flow/design.js

@@ -50,9 +50,6 @@ const reducers = {
       // code
       instantUpdate: false,
       autoReload: false,
-      // if set to true, will overwrite existing code with the converted imput
-      // if set to false, will create a script with an import of the input
-      convertSupportedTypes: false,
       // parameters
       parameterDefinitions: [],
       parameterValues: {},

package/src/ui/views/editor.js

@@ -1,212 +1,133 @@
-// ui-editor.js
-//
-// == OpenJSCAD.org, Copyright (c) 2013-2016, Licensed under MIT License
-//
-// Editor Functionality
-//
-// History:
-//   2016/06/27: 0.5.1: added local storage by Robert Starkey
-//   2016/02/02: 0.4.0: GUI refactored, functionality split up into more files, mostly done by Z3 Dev
-
-// --- Dependencies
-// gProcessor var
-// #editor element
-
-// --- Global Variables
-const ace = require('brace')
-require('brace/ext/language_tools.js')
-ace.acequire('ace/ext/language_tools')
-require('brace/mode/javascript')
-require('brace/mode/scad')
-require('brace/theme/chrome')
-require('brace/theme/monokai')
-const openscadOpenJscadParser = require('@jscad/openscad-openjscad-translator')
-
-// See http://ace.ajax.org/#nav=howto
-const setUpEditor = (element, gProcessor) => {
-  const langTools = ace.acequire('ace/ext/language_tools')
-
-  const flowCompleter = {
-    getCompletions: (editor, session, pos, prefix, callback) => {
-      // your code
-    }
-  }
-  langTools.addCompleter(flowCompleter)
-
-  let gEditor = null
-  gEditor = ace.edit(element)
-  gEditor.$blockScrolling = Infinity
-  gEditor.getSession().setMode('ace/mode/javascript')
-  gEditor.setTheme('ace/theme/monokai')
-  // gEditor.getSession().setMode("ace/mode/javascript");
-  // gEditor.setTheme("ace/theme/ambiance")
-  // gEditor.setTheme("ace/theme/chaos")
-  // gEditor.setTheme('ace/theme/chrome')
-  // gEditor.setTheme("ace/theme/clouds")
-  // gEditor.setTheme("ace/theme/cobalt")
-  // gEditor.setTheme("ace/theme/dawn") // nice
-  // gEditor.setTheme("ace/theme/dreamweaver")
-  // gEditor.setTheme("ace/theme/eclipse")
-  // gEditor.setTheme("ace/theme/github")
-  // gEditor.setTheme("ace/theme/idle_fingers")
-  // gEditor.setTheme("ace/theme/katzenmilch")
-  // gEditor.setTheme("ace/theme/kr_theme")
-  // gEditor.setTheme("ace/theme/kuroir")
-  // gEditor.setTheme("ace/theme/merbivore")
-  // gEditor.setTheme("ace/theme/mono_industrial")
-  // gEditor.setTheme("ace/theme/monokai")
-  // gEditor.setTheme("ace/theme/pastel_on_dark")
-  // gEditor.setTheme("ace/theme/solarized_dark")
-  // gEditor.setTheme("ace/theme/solarized_light")
-  // gEditor.setTheme("ace/theme/terminal")
-  // gEditor.setTheme("ace/theme/textmate")
-  // gEditor.setTheme("ace/theme/tomorrow")
-  // gEditor.setTheme("ace/theme/tomorrow_night")
-  // gEditor.setTheme("ace/theme/tomorrow_night_blue")
-  // gEditor.setTheme("ace/theme/tomorrow_night_bright")
-  // gEditor.setTheme("ace/theme/tomorrow_night_eighties")
-  // gEditor.setTheme("ace/theme/twilight")
-  // gEditor.setTheme("ace/theme/vibrant_ink")
-  // gEditor.setTheme("ace/theme/xcode")
-
-  const runExec = (editor) => {
-    let src = editor.getValue()
-    if (src.match(/^\/\/!OpenSCAD/i)) {
-      editor.getSession().setMode('ace/mode/scad')
-      // FIXME test for the global function first
-      src = openscadOpenJscadParser.parse(src)
-    } else {
-      editor.getSession().setMode('ace/mode/javascript')
-    }
-    if (gProcessor !== null) {
-      // gProcessor.setJsCad(src)
-    }
-  }
-  // enable special keystrokes
-  gEditor.commands.addCommand({
-    name: 'setJSCAD',
-    bindKey: { win: 'F5|Shift-Return', mac: 'F5|Shift-Return' },
-    exec: runExec
-  })
-  document.body.addEventListener('keydown', (evt) => {
-    if (evt.key === 'F5') {
-      evt.preventDefault()
-      runExec(gEditor)
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'viewerReset',
-    bindKey: { win: 'Ctrl-Return', mac: 'Command-Return' },
-    exec: function (editor) {
-      if (gProcessor !== null) {
-        gProcessor.viewer.resetCamera()
-      }
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'saveSource',
-    bindKey: { win: 'Ctrl-S', mac: 'Command-S' },
-    exec: function (editor) {
-      const src = editor.getValue()
-      localStorage.editorContent = src
-      gProcessor.setStatus('saved', 'Saved source to browser storage')
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'loadSource',
-    bindKey: { win: 'Ctrl-L', mac: 'Command-L' },
-    exec: function (editor) {
-      const src = localStorage.editorContent
-      if (src && src.length) editor.setValue(src, 1)
-      gEditor.commands.exec('setJSCAD', editor)
-      gProcessor.setStatus('loaded', 'Loaded source from browser storage')
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'downloadSource',
-    bindKey: { win: 'Ctrl-Shift-S', mac: 'Command-Shift-S' },
-    exec: function (editor) {
-      const src = editor.getValue()
-      setTimeout(() => {
-        const blob = new Blob([src], { type: 'text/plain' })
-        const objectUrl = URL.createObjectURL(blob)
-        const saveLink = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
-        saveLink.href = objectUrl
-        saveLink.download = 'MyDesign.jscad'
-
-        const event = new MouseEvent('click')
-        saveLink.dispatchEvent(event)
-      }, 0)
-    }
-  })
-  gEditor.commands.addCommand({
-    name: 'clearStorage',
-    bindKey: { win: 'Ctrl-Shift-\\', mac: 'Command-Shift-\\' },
-    exec: function (editor) {
-      localStorage.clear()
-      gProcessor.setStatus('cleared', 'Cleared browser storage')
-    }
-  })
-
-  return gEditor
+const html = require('nanohtml')
+
+const CodeMirror = require('codemirror')
+require('codemirror/mode/javascript/javascript')
+require('codemirror/addon/hint/javascript-hint')
+
+const editorOptions = {
+  mode: 'javascript',
+  indentUnit: 2,
+  smartIndent: false,
+  indentWithTabs: false,
+  lineNumbers: true,
+  autofocus: true
 }
 
-const putSourceInEditor = (gEditor, src, fn) => {
-  if (gEditor) {
-    gEditor.setValue(src, -1)
-    if (src.match(/^\/\/!OpenSCAD/i)) {
-      gEditor.getSession().setMode('ace/mode/scad')
-    } else {
-      gEditor.getSession().setMode('ace/mode/javascript')
-    }
+let editor
+let wrapper
+
+/*
+ * Create a file tree from the contents of the editor
+ */
+const createFileTree = (editor) => {
+  const source = editor.getValue()
+  if (source && source.length > 0) {
+    return [{ ext: 'js', fullPath: '/changes.js', mimetype: 'javascript', name: 'changes.js', source }]
   }
+  return null
 }
 
-const getSourceFromEditor = (gEditor) => {
-  if (gEditor !== null) {
-    return gEditor.getValue()
+/*
+ * Create a HTML wrapper for the editor (single instance)
+ */
+const createWrapper = (state, callbackToStream) => {
+  if (!wrapper) {
+    wrapper = html`
+    <section class='popup-menu' id='editor' key='editor' style='visibility:${state.activeTool === 'editor' ? 'visible' : 'hidden'}'>
+      <textarea></textarea>
+    </section>
+    `
+    wrapper.onkeydown = (e) => e.stopPropagation()
+    wrapper.onkeyup = (e) => e.stopPropagation()
+
+    // and add the editor
+    editor = CodeMirror.fromTextArea(wrapper.firstChild, editorOptions)
+
+    editor.setOption('extraKeys', {
+      Tab: (cm) => {
+        const spaces = Array(cm.getOption('indentUnit') + 1).join(' ')
+        cm.replaceSelection(spaces)
+      }
+    })
+
+    // inject style sheet for the editor
+    const head = document.getElementsByTagName('HEAD')[0]
+    const link = document.createElement('LINK')
+    link.rel = 'stylesheet'
+    link.href = './css/codemirror.css'
+    head.appendChild(link)
   }
-  return ''
+  return wrapper
 }
-const html = require('bel')
 
+/*
+ * Create the editor wrapper for handling changes to file contents.
+ *
+ * Note: Only the contents of a single file are loaded into the editor. No projects.
+ * Note: Only the contents of javascript files are loaded into the editor. No external formats.
+ */
 const editorWrapper = (state, editorCallbackToStream) => {
-  const el = html`
-  <div id='editor' key='editor' style='visibility:${state.activeTool === 'editor' ? 'visible' : 'hidden'}' >
-  </div>`
-
-  const editor = setUpEditor(el)
-  // const snippets = '# Prototype\nsnippet proto\n  ${1:class_name}.prototype.${2:method_name} = function(${3:first_argument}) {\n    ${4:// body...}\n  };\n# Function\nsnippet fun\n  function ${1?:function_name}(${2:argument}) {\n    ${3:// body...}\n  }\n# Anonymous Function\nregex /((=)\\s*|(:)\\s*|(\\()|\\b)/f/(\\))?/\nsnippet f\n  function${M1?: ${1:functionName}}($2) {\n    ${0:$TM_SELECTED_TEXT}\n  }${M2?;}${M3?,}${M4?)}\n# Immediate function\ntrigger \\(?f\\(\nendTrigger \\)?\nsnippet f(\n  (function(${1}) {\n    ${0:${TM_SELECTED_TEXT:/* code */}}\n  }(${1}));\n# if\nsnippet if\n  if (${1:true}) {\n    ${0}\n  }\n# if ... else\nsnippet ife\n  if (${1:true}) {\n    ${2}\n  } else {\n    ${0}\n  }\n# tertiary conditional\nsnippet ter\n  ${1:/* condition */} ? ${2:a} : ${3:b}\n# switch\nsnippet switch\n  switch (${1:expression}) {\n    case \'${3:case}\':\n      ${4:// code}\n      break;\n    ${5}\n    default:\n      ${2:// code}\n  }\n# case\nsnippet case\n  case \'${1:case}\':\n    ${2:// code}\n    break;\n  ${3}\n\n# while (...) {...}\nsnippet wh\n  while (${1:/* condition */}) {\n    ${0:/* code */}\n  }\n# try\nsnippet try\n  try {\n    ${0:/* code */}\n  } catch (e) {}\n# do...while\nsnippet do\n  do {\n    ${2:/* code */}\n  } while (${1:/* condition */});\n# Object Method\nsnippet :f\nregex /([,{[])|^\\s*/:f/\n  ${1:method_name}: function(${2:attribute}) {\n    ${0}\n  }${3:,}\n# setTimeout function\nsnippet setTimeout\nregex /\\b/st|timeout|setTimeo?u?t?/\n  setTimeout(function() {${3:$TM_SELECTED_TEXT}}, ${1:10});\n# Get Elements\nsnippet gett\n  getElementsBy${1:TagName}(\'${2}\')${3}\n# Get Element\nsnippet get\n  getElementBy${1:Id}(\'${2}\')${3}\n# console.log (Firebug)\nsnippet cl\n  console.log(${1});\n# return\nsnippet ret\n  return ${1:result}\n# for (property in object ) { ... }\nsnippet fori\n  for (var ${1:prop} in ${2:Things}) {\n    ${0:$2[$1]}\n  }\n# hasOwnProperty\nsnippet has\n  hasOwnProperty(${1})\n# docstring\nsnippet /**\n  /**\n   * ${1:description}\n   *\n   */\nsnippet @par\nregex /^\\s*\\*\\s*/@(para?m?)?/\n  @param {${1:type}} ${2:name} ${3:description}\nsnippet @ret\n  @return {${1:type}} ${2:description}\n# JSON.parse\nsnippet jsonp\n  JSON.parse(${1:jstr});\n# JSON.stringify\nsnippet jsons\n  JSON.stringify(${1:object});\n# self-defining function\nsnippet sdf\n  var ${1:function_name} = function(${2:argument}) {\n    ${3:// initial code ...}\n\n    $1 = function($2) {\n      ${4:// main code}\n    };\n  }\n# singleton\nsnippet sing\n  function ${1:Singleton} (${2:argument}) {\n    // the cached instance\n    var instance;\n\n    // rewrite the constructor\n    $1 = function $1($2) {\n      return instance;\n    };\n    \n    // carry over the prototype properties\n    $1.prototype = this;\n\n    // the instance\n    instance = new $1();\n\n    // reset the constructor pointer\n    instance.constructor = $1;\n\n    ${3:// code ...}\n\n    return instance;\n  }\n# class\nsnippet class\nregex /^\\s*/clas{0,2}/\n  var ${1:class} = function(${20}) {\n    $40$0\n  };\n  \n  (function() {\n    ${60:this.prop = ""}\n  }).call(${1:class}.prototype);\n  \n  exports.${1:class} = ${1:class};\n# \nsnippet for-\n  for (var ${1:i} = ${2:Things}.length; ${1:i}--; ) {\n    ${0:${2:Things}[${1:i}];}\n  }\n# for (...) {...}\nsnippet for\n  for (var ${1:i} = 0; $1 < ${2:Things}.length; $1++) {\n    ${3:$2[$1]}$0\n  }\n# for (...) {...} (Improved Native For-Loop)\nsnippet forr\n  for (var ${1:i} = ${2:Things}.length - 1; $1 >= 0; $1--) {\n    ${3:$2[$1]}$0\n  }\n\n\n#modules\nsnippet def\n  define(function(require, exports, module) {\n  "use strict";\n  var ${1/.*\\///} = require("${1}");\n  \n  $TM_SELECTED_TEXT\n  });\nsnippet req\nguard ^\\s*\n  var ${1/.*\\///} = require("${1}");\n  $0\nsnippet requ\nguard ^\\s*\n  var ${1/.*\\/(.)/\\u$1/} = require("${1}").${1/.*\\/(.)/\\u$1/};\n  $0\n'
-
-  // editor.resize(true)
-  // editor.renderer.updateFull()
-  /* ace.config.loadModule('ace/snippets/javascript', function (ba) {
-  })
-  ace.config.loadModule('ace/ext/language_tools', function () {
-    const bla = require('brace/snippets/javascript')
-    editor.insertSnippet(bli);
-  }) */
-  editor.setOptions({
-    enableBasicAutocompletion: true,
-    enableSnippets: true,
-    enableLiveAutocompletion: false
-  })
-
-  const source = `
-  const main = (params) => {
+  const el = createWrapper(state, editorCallbackToStream)
+
+  // and adjust the state
+  if (state.activeTool === 'editor') {
+    el.style.visibility = 'visible'
+    el.focus()
+
+    let compileShortcut = state.shortcuts.find((shortcut) => shortcut.args === 'reevaluate')
+    if (!compileShortcut) compileShortcut = { args: 'Shift-Enter' }
+    let key = compileShortcut.key.toUpperCase()
+    // can you say PAIN? codemirror has very specific control prefixes!
+    key = key.replace(/enter/i, 'Enter')
+    key = key.replace(/alt[+-]/i, 'Alt-')
+    key = key.replace(/cmd[+-]/i, 'Cmd-')
+    key = key.replace(/control[+-]/i, 'Ctrl-')
+    key = key.replace(/shift[+-]/i, 'Shift-')
+
+    const extraKeys = {
+      Tab: (cm) => {
+        const spaces = Array(cm.getOption('indentUnit') + 1).join(' ')
+        cm.replaceSelection(spaces)
+      }
+    }
+    extraKeys[key] = (cm) => {
+      const fileTree = createFileTree(cm)
+      if (fileTree) editorCallbackToStream.callback({ type: 'read', id: 'loadRemote', data: fileTree })
+    }
+    editor.setOption('extraKeys', extraKeys)
+
+    editor.focus()
+    editor.scrollIntoView({ line: 0, ch: 0 })
+    // workaround to make content appear without clicking the editor after loading an example
+    // call the refresh in a setTimeout to force js to run it in the next global event loop
+    setTimeout(() => editor.refresh(), 0)
+  } else {
+    el.style.visibility = 'hidden'
+  }
 
+  // and adjust the contents if any
+  if (state.design && state.design.filesAndFolders) {
+    if (state.design.filesAndFolders.length === 1) {
+      const file0 = state.design.filesAndFolders[0]
+      let source = file0.source ? file0.source : ''
+      if (file0.mimetype) {
+        if (file0.mimetype.indexOf('javascript') < 0) source = '// imported from external format'
+      } else {
+        source = '// imported from project'
+      }
+      const prevsource = editor.getValue()
+      if (source !== prevsource) {
+        editor.focus()
+        editor.setValue(source)
+        editor.setCursor(0, 0)
+        editor.refresh()
+      }
+    }
   }
-  module.exports = {main}
-  `
-  // state.design.source
 
-  putSourceInEditor(editor, source)
   return el
 }
 
 module.exports = {
-  editorWrapper,
-  setUpEditor,
-  putSourceInEditor,
-  getSourceFromEditor
+  editorWrapper
 }

package/src/ui/views/main.js

@@ -11,7 +11,7 @@ const dom = (state, i18n, paramsCallbacktoStream, editorCallbackToStream) => {
   const help = require('./help')(state, i18n)
 
   const io = require('./io')(state, i18n)
-  const editor = require('./editor2').editorWrapper(state, editorCallbackToStream, i18n)
+  const editor = require('./editor').editorWrapper(state, editorCallbackToStream, i18n)
   const toolBar = require('./toolbar')(state, i18n)
 
   const viewer = require('./viewer')(state, i18n)

package/src/ui/views/options.js

@@ -38,20 +38,6 @@ const options = (state, i18n) => {
     </label>
   </fieldset>
 
-  <fieldset>
-    <legend> <h3> ${i18n`Storage`} </h3> </legend>
-    <label>${i18n`settings storage path`} ${i18n`not settable`}
-      <input type='text' disabled value='${state.storage.path}' disabled />
-    </label>
-  </fieldset>
-
-  <fieldset>
-    <legend> <h3> ${i18n`File Handling`} </h3> </legend>
-    <label>${i18n`enable conversion to scripts`}
-      <input type='checkbox' checked=false id='design-convertSupportedTypes' checked=${state.design.convertSupportedTypes}/>
-    </label>
-  </fieldset>
-
   ${shortcuts}
 
 </section>`

package/src/ui/views/toolbar.js

@@ -6,13 +6,13 @@ const toolbar = (state, i18n) => {
   const helpIcon = html`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-help-circle"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12" y2="17"/></svg>`
 
   return html`<span id='toolbar'>
-        <button id='toggleOptions'>
+        <button id='toggleOptions' aria-label='options'>
           ${optionsIcon}
         </button>
-        <button id='toggleEditor'>
+        <button id='toggleEditor' aria-label='editor'>
           ${editorIcon}
         </button>
-        <button id='toggleHelp'>
+        <button id='toggleHelp' aria-label='help'>
           ${helpIcon}
         </button>
       </span>`