@jscad/web 2.5.4 → 2.5.8

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.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
+
+
+
+
+
 ## [2.3.1](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/examples@2.3.0...@jscad/examples@2.3.1) (2021-09-27)
 
 **Note:** Version bump only for package @jscad/examples

package/examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscad/examples",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Example Files for JSCAD",
   "repository": "https://github.com/jscad/OpenJSCAD.org",
   "scripts": {},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jscad/web",
-  "version": "2.5.4",
+  "version": "2.5.8",
   "description": "Web Application for JSCAD",
   "repository": "https://github.com/jscad/OpenJSCAD.org",
   "main": "src/index.js",
@@ -34,18 +34,18 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@jscad/array-utils": "2.1.1",
-    "@jscad/core": "2.5.4",
-    "@jscad/examples": "2.3.2",
-    "@jscad/io": "2.2.4",
-    "@jscad/modeling": "2.7.2",
-    "@jscad/regl-renderer": "2.5.4",
+    "@jscad/array-utils": "2.1.3",
+    "@jscad/core": "2.5.8",
+    "@jscad/examples": "2.3.3",
+    "@jscad/io": "2.3.1",
+    "@jscad/modeling": "2.9.2",
+    "@jscad/regl-renderer": "2.5.8",
     "@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 +58,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 +66,5 @@
     "url": "https://opencollective.com/openjscad",
     "logo": "https://opencollective.com/openjscad/logo.txt"
   },
-  "gitHead": "b6c5675d2d9a292e0ba24896bf22d0e9dc5d4270"
+  "gitHead": "0cebde0166c104e3c08cc05d2c03d9defc7eca26"
 }

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/viewer.js

@@ -143,7 +143,7 @@ const viewer = (state, i18n) => {
   } else {
     // only generate entities when the solids change
     // themes, options, etc also change the viewer state
-    const solids = state.design.solids
+    const solids = state.design.solids.filter((solid) => solid && (solid instanceof Object))
     if (prevSolids) {
       const theme = state.themes.themeSettings.viewer
       const color = theme.rendering.meshColor

package/src/utils/logger.js

@@ -18,7 +18,7 @@ const makeLogger = (params) => {
 
   const warning = (...params) => {
     if (enabled) {
-      console.warning(...params)
+      console.warn(...params)
     }
   }
   const error = (...params) => {