@jscad/web 2.5.6 → 2.5.10

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.5.10](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/web@2.5.9...@jscad/web@2.5.10) (2022-05-15)
+
+
+### Bug Fixes
+
+* **web:** corrected messages from parameter runtime errors (missing types, etc) ([cf7d5f1](https://github.com/jscad/OpenJSCAD.org/commit/cf7d5f12f2b99d67167eb79f1e2f085f8ff297bc))
+* **web:** corrected status (error) message format and display ([abd02b1](https://github.com/jscad/OpenJSCAD.org/commit/abd02b14a64f88bbf63c36e7f9dc1cee76402f3f))
+* **web:** enhanced design state management to handle error messages ([1c15139](https://github.com/jscad/OpenJSCAD.org/commit/1c15139e6733b4157c730399d18a158fb44e38a9))
+
+
+
+
+
+## [2.5.9](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/web@2.5.8...@jscad/web@2.5.9) (2022-04-24)
+
+
+### Bug Fixes
+
+* **web:** remove unused file handling and storage path options ([#1071](https://github.com/jscad/OpenJSCAD.org/issues/1071)) ([02c740c](https://github.com/jscad/OpenJSCAD.org/commit/02c740ce56c04ffb7b83a5e48009abb111c64001))
+
+
+
+
+
+## [2.5.8](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/web@2.5.7...@jscad/web@2.5.8) (2022-04-03)
+
+**Note:** Version bump only for package @jscad/web
+
+
+
+
+
+## [2.5.7](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/web@2.5.6...@jscad/web@2.5.7) (2022-04-03)
+
+
+### Bug Fixes
+
+* **web:** editor styling and example loading fixes ([#1031](https://github.com/jscad/OpenJSCAD.org/issues/1031)) ([4f811a2](https://github.com/jscad/OpenJSCAD.org/commit/4f811a27c0cbb7caabf28fcef932cbaf19aaa6f4))
+
+
+
+
+
 ## [2.5.6](https://github.com/jscad/OpenJSCAD.org/compare/@jscad/web@2.5.5...@jscad/web@2.5.6) (2022-03-13)
 
 **Note:** Version bump only for package @jscad/web

package/README.md

@@ -1,6 +1,6 @@
 # @jscad/web: JSCAD Web UI
 
-This is the Web based UI for JSCAD, either to host yourself, or use directly at https://www.openjscad.xyz/.
+This is the Web based UI for JSCAD, either to host yourself, or use directly at https://openjscad.xyz/.
 
 [![NPM version](https://badge.fury.io/js/%40jscad%2Fweb.svg)](https://www.npmjs.com/package/@jscad/web)
 [![NPM downloads](https://img.shields.io/npm/dw/@jscad/web)](https://www.npmjs.com/package/@jscad/web)
@@ -32,7 +32,7 @@ This is the Web based UI for JSCAD, either to host yourself, or use directly at
 
 ### Immediate Use (no installation)
 
-Go to *[www.openjscad.xyz](http://www.openjscad.xyz)*
+Go to *[openjscad.xyz](https://openjscad.xyz)*
 
 > Note: Tested browsers include Chrome, Firefox, Opera, Safari, Edge
 
@@ -77,8 +77,8 @@ https://YOURSITE/#http://www.thingiverse.com/download:164128
 
 ## 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/)
 
 ## Known Issues
 
@@ -95,11 +95,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.
 
@@ -116,7 +116,7 @@ HUGE THANKS and SHOUTOUT to [nodeBB](https://nodebb.org/) for hosting our (aweso
 
 Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/openjscad#backer)]
 
-<a href="https://opencollective.com/openjscad#backers" target="_blank"><img src="https://opencollective.com/openjscad/backers.svg?width=890"></a>
+<a href="https://opencollective.com/openjscad#backers" target="_blank"><img src="https://opencollective.com/openjscad/backers.svg?width=890" alt="Open Collective"></a>
 
 ## Sponsors
 

package/css/codemirror.css

@@ -60,20 +60,13 @@
 .cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }
-.cm-fat-cursor-mark {
-  background-color: rgba(20, 255, 20, 0.5);
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-}
-.cm-animate-fat-cursor {
-  width: auto;
-  border: 0;
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-  background-color: #7e7;
-}
+.cm-fat-cursor .CodeMirror-line::selection,
+.cm-fat-cursor .CodeMirror-line > span::selection,
+.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
+.cm-fat-cursor .CodeMirror-line::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
+.cm-fat-cursor { caret-color: transparent; }
 @-moz-keyframes blink {
   0% {}
   50% { background-color: transparent; }
@@ -171,6 +164,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
+  z-index: 0;
 }
 .CodeMirror-sizer {
   position: relative;
@@ -184,6 +178,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   position: absolute;
   z-index: 6;
   display: none;
+  outline: none;
 }
 .CodeMirror-vscrollbar {
   right: 0; top: 0;
@@ -346,4 +341,4 @@ div.CodeMirror-dragcursors {
 .cm-tab-wrap-hack:after { content: ''; }
 
 /* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }
+span.CodeMirror-selectedtext { background: none; }

package/css/demo.css

@@ -58,7 +58,8 @@ body {
   src: local('OpenSans'), local('OpenSans'), url(../fonts/Open_Sans/OpenSans-Bold.ttf) format('truetype');
 }
 
-#renderTarget{
+#renderTarget {
+  cursor: move;
   width: 100%;
   height: 100%;
   position: absolute;
@@ -68,7 +69,7 @@ body {
   bottom: 0px;
 }
 
-#fileLoader{
+#fileLoader {
   width: 0.1px;
   height: 0.1px;
   opacity: 0;
@@ -80,9 +81,9 @@ body {
   box-shadow: none;
   border: 1px solid #bfbcbc;
   border-color: black;
-  border-radius: 0px;
+  border-radius: 1px;
   border-width: 1px;
-  padding: 2px 0px 0px 2px;
+  padding: 0px 2px;
   margin: 0px 5px 0px 0px;
   background-color: white;
   outline: none;
@@ -95,12 +96,13 @@ body {
 }
 
 #controls {
+  box-sizing: border-box;
   color: var(--main-text-color);
   position: absolute;
   width: 100%;
+  padding: 0px 10px;
   user-select: none;
   top: 30px;
-  left: 10px;
   z-index: 1;
 }
 
@@ -109,6 +111,7 @@ body {
 }
 
 section#params {
+  background-color: rgba(255, 255, 255, 0.6);
   position: absolute;
   bottom: 10px;
   left: 10px;
@@ -168,13 +171,6 @@ section#params {
   display: none;
 }
 
-/*#paramsTable .groupTitle:hover .icon-closed{
-  display: none;
-}
-#paramsTable .groupTitle:hover .icon-open{
-  display: block;
-}*/
-
 #paramsTable .controlsLine{
   padding-top: 10px;
 }
@@ -197,20 +193,19 @@ span#paramsControls {
   color: red;
   top: 60px;
   left: 0;
-  width: 33%;
   padding:  20px;
   z-index: 1;
 }
 
+#stacktrace ul{
+  padding: 0px 0px 0px 15px;
+  margin: 0px;
+}
+
 #container{
   position: relative;
   height: 100%;
   width: 100%;
-  /*position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;*/
 }
 
 h3 {
@@ -218,8 +213,9 @@ h3 {
 }
 
 #header {
+  box-sizing: border-box;
   position: absolute;
-  left: 10px;
+  padding: 0px 10px;
   color: var(--main-text-color);
   width: 100%;
   display: inline-flex;
@@ -253,7 +249,7 @@ h3 {
 section {
   padding: 20px;
   box-shadow: 5px 5px 7px 2px rgba(0, 0, 0, 0.17);
-  overflow: scroll;
+  overflow: auto;
   color: var(--main-text-color);
   z-index: 10;
   border: 1px solid #aaa;
@@ -262,8 +258,8 @@ section {
 section.popup-menu {
   position: absolute;
   top: 40px;
-  right: 15px;
-  height: 80%;
+  right: 10px;
+  max-height: 80%;
 }
 
 section.popup-menu h2 {
@@ -287,17 +283,19 @@ section.popup-menu ul {
 }
 
 #options {
+  background-color: rgba(255, 255, 255, 0.6);
   padding-left: 18px;
 }
 
-#options fieldset{
+#options fieldset {
   border: none;
   display: table;
+  padding-inline: 0px;
 }
-#options fieldset label{
+#options fieldset label {
   display: table-row;
 }
-#options fieldset input{
+#options fieldset input {
   display: table-row;
   align-self: flex-end;
 }
@@ -306,7 +304,9 @@ section.popup-menu ul {
 }
 
 #editor {
-  padding: 1px;
+  bottom: 10px;
+  max-height: none;
+  padding: 0px;
   font-size: 0.9em;
   width: 50%;
 }
@@ -317,6 +317,7 @@ textarea {
 }
 
 #help {
+  background-color: rgba(255, 255, 255, 0.6);
 }
 
 #help a {
@@ -358,7 +359,8 @@ button {
   border-color: black;
   border-radius: 0px;
   border-width: 1px;
-  margin: 0px 5px 0px 5px;
+  margin: 0px 5px;
+  padding: 2px 6px;
   background-color: white;
   letter-spacing: .5px;
   outline: none;
@@ -366,12 +368,12 @@ button {
   opacity: 0.6;
 }
 
-/*button:hover{
-  background-color:rgb(0, 153, 255);
-}*/
+button > svg {
+  vertical-align: middle;
+}
 
 button:hover svg {
-  stroke:rgb(0, 153, 255);
+  stroke: rgb(0, 153, 255);
 }
 
 #toolbar button:hover {
@@ -423,16 +425,16 @@ input[type="checkbox"]:hover{
 }
 
 input.error::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: red;
-    opacity: 1; /* Firefox */
+  color: red;
+  opacity: 1; /* Firefox */
 }
 
 #shortcuts .error input:-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: red;
+  color: red;
 }
 
 #shortcuts .error input::-ms-input-placeholder { /* Microsoft Edge */
-    color: red;
+  color: red;
 }
 
 .icon {

package/css/style.css

@@ -36,35 +36,6 @@ a:visited {
    z-index: 20;
 }
 
-#editFrame {
-/*  display: none; */
-
-  margin: 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-/*  left: 0; */
-  right: 0;
-
-  width: 40%;
-  font-weight: normal;
-}
-
-#editHandle {
-  left: -25px;
-  top: 45%;
-  position: absolute;
-  z-index: 6;
-  opacity: 0.9;
-}
-
-#editFrame {
-  transition: width 0.4s;
-  -o-transition: width 0.4s;
-  -moz-transition: width 0.4s;
-  -webkit-transition: width 0.4s;
-}
-
 .ace_gutter {
    border-left: 1px solid #ccc;
    background: transparent !important;
@@ -127,20 +98,6 @@ canvas {
    z-index: 100;
 }
 
-.okButton {
-   border: 2px solid #808080;
-   border-radius: 4px;
-   padding: 0.5em;
-   padding-left: 2em;
-   padding-right: 2em;
-   margin-top: 3em;
-   background: #eee;
-}
-
-.okButton:hover {
-   background: #ccc;
-}
-
 #footer {
    font-size: 0.7em;
    text-align: left;
@@ -197,13 +154,6 @@ canvas {
    left: 0;
 }
 
-#menuHandle {
-   right: -25px;
-   top: 45%;
-   position: absolute;
-   z-index: 6;
-}
-
 #menu nav {
    position: relative;
    top: 50px;
@@ -245,34 +195,6 @@ canvas {
    font-size: 0.6em;
 }
 
-.info .infoView {
-   text-align: center;
-   font-weight: bold;
-   color: #444;
-   background: rgba(0,0,0,0.1);
-}
-
-.info .infoOperation {
-   font-weight: bold;
-   color: #602080;
-}
-
-.info .infoKey {
-   font-weight: bold;
-   color: #808080;
-}
-
-#menuVersion {
-   text-align: center;
-   font-size: 0.6em;
-   color: #666;
-}
-
-.menuSubInfo {
-   font-size: 0.6em;
-   color: #666;
-}
-
 #examples {
    /* width: 60em; */
    width: auto;
@@ -294,16 +216,6 @@ canvas {
    list-style-type: none;
 }
 
-#examplesHandle {
-   bottom: 0px;
-   left: 45%;
-   position: relative;
-   z-index: 10;
-}
-
-.examplesSeparator {
-}
-
 #options {
    width: auto;
    z-index: 12;
@@ -317,44 +229,8 @@ canvas {
    font-size: 0.8em;
 }
 
-.optionGroup {
-   border: 1px solid #ccc;
-   border-radius: 5px;
-   padding: 0.5em;
-   margin: 0.5em;
-   background: white;
-}
-
-.optionGroup input, .optionGroup select {
-  background: #fea;
-  border: none;
-}
-
-.optionInfo {
-   font-size: 0.8em;
-   color: #888;
-}
-
 /* arrows */
 
-.shift-scene {
-   position: absolute;
-   left: 50%;
-   top: 50%;
-   border-radius: 50%;
-   border: 5px dotted #999;
-   width: 160px;
-   height: 160px;
-   margin-top: -80px;
-   margin-left: -80px;
-   background: transparent;
-   cursor: move;
-   opacity: 0.8;
-   display: none;
-}
-.shift-scene.active {
-   display: block;
-}
 .arrow {
    width: 0px;
    height: 0px;

package/demo.html

@@ -2,11 +2,12 @@
 <html  xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="JSCAD is an open source set of modular, browser and command line tools for creating parametric 2D and 3D CAD designs with JavaScript code."/>
 
-    <title>JSCAD.xyz</title>
+    <title>JSCAD - JavaScript CAD</title>
 
     <link rel="stylesheet" type="text/css" href="./css/demo.css">
-    <link rel="stylesheet" type="text/css" href="./css/editor.css">
     <link rel="shortcut icon" href="imgs/favicon.png" type="image/x-png">
     <style>
         body{