v0.6.1

jauhl · Dec 1, 2018 · 9e2d261 · 9e2d261
1 parent da5898d
commit 9e2d261
Show file tree

Hide file tree

Showing 13 changed files with 1,590 additions and 138 deletions.
diff --git a/app.js b/app.js
diff --git a/app.min.js b/app.min.js
diff --git a/app.min.js.gz b/app.min.js.gz
diff --git a/docs/app.md b/docs/app.md
diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,6 @@
     "short_name": "mecEdit",
     "description": "A lightweight editor for modeling and simulation of planar linkages.",
     "start_url": "./mecEdit.html",
-    "scope": "/mecEdit/",
     "display": "standalone",
     "background_color": "#344c6b",
     "theme_color": "#343a40",  

diff --git a/mecEdit.html b/mecEdit.html
@@ -4,12 +4,13 @@
 <head>
     <!-- bootstrap requierement: responsive viewport meta tag -->
     <meta charset="utf-8">
+    <meta name='description' content="A lightweight editor for modeling and simulation of planar linkages.">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
     <title>mecEdit</title>
 
     <link rel="canonical" href="https://jauhl.github.io/mecEdit/" />
-    <link rel='manifest' href='https://jauhl.github.io/mecEdit/manifest.json'>  
+    <link rel='manifest' href='./manifest.json'>  
 
     <link rel="apple-touch-icon" sizes="180x180" href="./img/favicon/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon/favicon-32x32.png">
@@ -116,11 +117,11 @@
                             </div>
                         </div>
                         <div class="dropdown-divider"></div>
-                        <label class="btn btn-default btn-file dropdown-item">Import Linkage from *.JSON
+                        <label class="btn btn-default btn-file dropdown-item">Import Model from JSON
                             <input type="file" id="import" style="display: none;" accept="application/json">
                         </label>
                         <div class="dropdown-divider"></div>
-                        <a class="dropdown-item" id="export">Export Linkage as *.JSON</a>
+                        <a class="dropdown-item" id="export">Export Model as JSON</a>
                     </div>
                 </li>
 
@@ -268,19 +269,19 @@
 
                 <li class="d-inline-flex">
                     <div class="btn-group ml-5 mobile-neg-margin" role="group" aria-label="controls-group">
-                        <button type="button" id="run" class="btn btn-dark" data-toggle="popover" data-placement="bottom" data-content="Run / Idle">
+                        <button type="button" id="run" class="btn btn-dark" aria-label="Run Button" data-toggle="popover" data-placement="bottom" data-content="Run / Idle">
                             <!-- <i class="fas fa-play"></i> -->
                             <svg class="svg-icon" width="16px" height="16px" viewBox="0 0 448 512">
                                 <path id="run-symbol" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="white"/>
                             </svg>
                         </button>
-                        <button type="button" id="stop" class="btn btn-dark" data-toggle="popover" data-placement="bottom" data-content="Stop">
+                        <button type="button" id="stop" class="btn btn-dark" aria-label="Stop Button" data-toggle="popover" data-placement="bottom" data-content="Stop">
                             <!-- <i class="fas fa-stop"></i> -->
                             <svg class="svg-icon" width="16px" height="16px" viewBox="0 0 448 512">
                                 <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z" fill="white"/>
                             </svg>
                         </button>
-                        <button type="button" id="reset" class="btn btn-dark" data-toggle="popover" data-placement="bottom" data-content="Reset">
+                        <button type="button" id="reset" class="btn btn-dark" aria-label="Reset Button" data-toggle="popover" data-placement="bottom" data-content="Reset">
                             <!-- <i class="fas fa-undo"></i> -->
                             <svg class="svg-icon" width="16px" height="16px" viewBox="0 0 512 512">
                                 <path d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z" fill="white"/>
@@ -320,7 +321,7 @@
             <nav id="sb-l" class="col sidebar sb-l">
                 <ul class="nav nav-pills flex-column text-center">
                     <li class="nav-item mb-1">
-                        <button type="button" id="addbasenode" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
+                        <button type="button" id="addbasenode" aria-label="Add Basenode" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
                             data-placement="right" data-content="Basenode">
                             <svg viewBox="0 0 60 60" transform="scale(.7)">
                                 <circle cx="30" cy="30" r="20" stroke="white" stroke-width="3" fill="none" />
@@ -333,14 +334,14 @@
                             </svg>
                         </button>
 
-                        <button type="button" id="addnode" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
+                        <button type="button" id="addnode" aria-label="Add Node" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
                             data-placement="right" data-content="Node">
                             <svg viewBox="0 0 60 60" transform="scale(.7)">
                                 <circle cx="30" cy="30" r="20" stroke="white" stroke-width="3" fill="white" />
                             </svg>
                         </button>
 
-                        <button type="button" id="free" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
+                        <button type="button" id="free" aria-label="Add Free" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
                             data-placement="right" data-content="FREE">
                             <svg viewBox="-10 -20 60 60">
                                 <path d='M8,6 
@@ -362,7 +363,7 @@
                                     stroke-miterlimit="5" stroke-linejoin="miter" transform="translate(0,30) rotate(-45) scale(1.2)" />
                             </svg>
                         </button>
-                        <button type="button" id="tran" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
+                        <button type="button" id="tran" aria-label="Add Tran" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
                             data-placement="right" data-content="TRAN">
                             <svg viewBox="-10 -20 60 60">
                                 <path d='M 0,0 
@@ -385,7 +386,7 @@
                                     stroke-miterlimit="5" stroke-linejoin="miter" transform="translate(0,30) rotate(-45) scale(1.2)" />
                             </svg>
                         </button>
-                        <button type="button" id="rot" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
+                        <button type="button" id="rot" aria-label="Add Rot" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
                             data-placement="right" data-content="ROT">
                             <svg viewBox="-10 -20 60 60">
                                 <path d='M8,6 
@@ -405,7 +406,7 @@
                             </svg>
                         </button>
 
-                        <button type="button" id="drive" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
+                        <button type="button" id="drive" aria-label="Add Drive" class="btn btn-dark svg-btn mb-1" data-toggle="popover"
                             data-placement="right" data-content="Drive">
                             <!-- <i class="fas fa-cogs"></i> -->
                             <svg class="svg-icon" width="33px" height="33px" viewBox="0 0 640 512">
@@ -509,7 +510,7 @@ <h5 class="modal-title">Keyboard Shortcuts</h5>
                         </thead>
                         <tbody>
                             <tr>
-                                <th scope="row"><kbd>Esc</kbd></th>
+                                <th scope="row"><kbd>ESC</kbd></th>
                                 <td>Cancel current function</td>
                             </tr>
                             <tr>
@@ -533,9 +534,13 @@ <h5 class="modal-title">Keyboard Shortcuts</h5>
                                 <td>Purge element</td>
                             </tr>
                             <tr>
-                                <th scope="row">Sidebar:<br> <kbd>Ctrl</kbd>+<kbd>Leftclick</kbd></th>
+                                <th scope="row">Sidebar:<br> <kbd>CTRL</kbd>+<kbd>Leftclick</kbd></th>
                                 <td>Chain adding nodes & constraints</td>
                             </tr>
+                            <tr>
+                                <th scope="row">Mouse:<br> <kbd>Middle-Button</kbd></th>
+                                <td style="vertical-align: middle !important;">Pan the editor view</td>
+                            </tr>
                         </tbody>
                     </table>
                 </div>
@@ -575,20 +580,20 @@ <h5 class="modal-title">Keyboard Shortcuts</h5>
 
     <!-- <script src="./scripts/slider.js"></script>
     <script src="./scripts/mixin.js"></script>
-    <script src="./scripts/ctxm-templates.js"></script>
+    <script src="./scripts/templates.js"></script>
     <script src="./scripts/appevents.js"></script>
-    <script src="./scripts/examples.js"></script> -->
-    <script src="./app.min.js"></script>
+    <script src="./scripts/examples.js"></script>
+    <script src="./app.js"></script> -->
 
-    <!-- <script src="./app.min.js"></script> -->
+    <script src="./app.min.js"></script>
 
     <script>
         // handle Service Worker
         if ('serviceWorker' in navigator) {
             if (navigator.serviceWorker.controller) {
                 console.log('Service Worker found');
             } else {
-                navigator.serviceWorker.register('/mecEdit/serviceworker.js')
+                navigator.serviceWorker.register('serviceworker.js', {scope: '/mecEdit/'})
                 .then((registration) => {
                   console.log('Service Worker registration successful, scope is:', registration.scope);
                 })

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mecedit",
-    "version": "0.6.0",
+    "version": "0.6.1",
     "description": "Editor for Planar Mechanisms",
     "keywords": [
       "vector",
@@ -14,10 +14,11 @@
       "2d",
       "javascript"
     ],
-    "main": "app.js",
+    "main": "mecEdit.html",
     "scripts": {
-      "build": "npm run minify && npm run gzip",
-      "minify": "uglifyjs ./scripts/mixin.js ./scripts/slider.js ./scripts/ctxm-templates.js ./scripts/appevents.js ./scripts/examples.js ./app.js -o ./app.min.js --comments -c",
+      "build": "npm run minify && npm run jsdoc && npm run gzip",
+      "minify": "uglifyjs ./scripts/mixin.js ./scripts/slider.js ./scripts/templates.js ./scripts/appevents.js ./scripts/examples.js ./app.js -o ./app.min.js --comments -c",
+      "jsdoc": "jsdoc2md ./app.js > ./docs/app.md",
       "gzip": "ngzip ./app.min.js > ./app.min.js.gz"
     },
     "author": "Jan Uhlig",
@@ -28,7 +29,8 @@
     "license": "MIT",
     "devDependencies": {
       "uglify-es": "^3.3.9",
-      "ngzip": "^1.1.3"
+      "ngzip": "^1.1.3",
+      "jsdoc-to-markdown":"^4.0.1"
     }
   }
 
diff --git a/readme.md b/readme.md
@@ -27,6 +27,15 @@ planar linkages.
 
 # Changelog
 
+## v0.6.1
+
+### general:
++ The JSON-editor is now emptied before dragging & dropping files into it.
++ Placing components can now be canceled by clicking on the navbar or sidebar in addition to pressing `[Esc]` so mobile users won't get stuck.
++ Some other small changes.
+
+---
+
 ## v0.6.0 - PWA & various improvements
 
 ### general:

diff --git a/scripts/appevents.js b/scripts/appevents.js
@@ -5,7 +5,9 @@ const events = {
     sidebarClick: (id) => {
         /*********************************  sidebar click handler  ****************************************/ 
         document.getElementById(id).addEventListener('click', (e) => { // bind to parent
-            console.log(e);
+            // Cancel chain-building, never move to the end of this handler!
+            if (app.build) { app.resetApp(); document.body.style.cursor = 'default'; };
+
             if (e.target && ['free', 'tran', 'rot'].includes(e.target.id)) { app.build = { mode: e.target.id, continue: e.shiftKey }; app.instruct.innerHTML = 'Select first node; [ESC] to cancel'; }; // check for children // ,'spring'
             if (e.target && e.target.id === 'drive') { app.build = { mode: e.target.id }; app.reset(); app.instruct.innerHTML = 'Select a constraint to add a drive to; [ESC] to cancel'; };
             if (e.target && (e.target.id === 'addnode' || e.target.id === 'addbasenode')) {
@@ -18,6 +20,9 @@ const events = {
     navbarClick: (id) => {
         /*********************************  navbar click handler  ****************************************/ 
         document.getElementById(id).addEventListener('click', (e) => {
+            // Cancel chain-building, never move to the end of this handler!
+            if (app.build) { app.resetApp(); document.body.style.cursor = 'default'; }
+
             // File
             if (e.target && e.target.id === 'newModel') { app.newModel(); };
             if (e.target && e.target.id.includes('nav-example-')) { app.newModel(JSON.parse(JSON.stringify(examples[e.target.id.replace('nav-example-','')]))); }; // use copy so source wont be changed
@@ -101,7 +106,7 @@ const events = {
     },
     navbarChange: (id) => {
         /*********************************  navbar change handler  ****************************************/ 
-        document.getElementById(id).addEventListener('change', e => app.loadFromJSON(e.target.files, true) );
+        document.getElementById(id).addEventListener('change', e => app.loadFromJSON(e.target.files) );
     },
     keyboardDown: () => {
         /*********************************  global keyboard handler  ****************************************/ 
@@ -381,7 +386,7 @@ const events = {
             };
 
             if (!skipUpdate) { 
-                app.viewModal.setContent(ctxm.viewModal());
+                app.viewModal.setContent(tmpl.viewModal());
                 if (!!document.getElementById('view-fill-color-btn'))
                     document.getElementById('view-fill-color-btn').style.backgroundColor = document.getElementById('view-fill-color').disabled ? 'transparent' : '#e9ecef';
                 app.viewModal.update();
@@ -394,7 +399,7 @@ const events = {
             if (e.target && e.target.id === 'view-accept')
                 app.addViewFromModal();
             if (e.target && e.target.id === 'view-fill-color-btn')
-                app.toggleViewfill();
+                app.toggleViewFill();
         });
     },
     viewModalHide: (id) => {