Improve document tabs and allow user to create new documents manually

index.html

@@ -74,11 +74,16 @@
           * FSMDocument tabs
           */
 
+        .document-tabs-container {
+            overflow-x: auto;
+        }
+
         #document-tabs {
             list-style: none;
             padding: 0;
             margin: 0;
             height: 44px;
+            white-space: nowrap;
         }
 
         #document-tabs .document-tab {
@@ -86,6 +91,7 @@
             border: 1px solid rgba(0, 0, 0, .33);
             margin: 0;
             padding: 8px 16px;
+            cursor: pointer;
         }
 
         #document-tabs .document-tab:first-child {
@@ -204,13 +210,15 @@
 
 <div class="container">
 
-    <nav>
+    <nav class="document-tabs-container">
         <ul id="document-tabs">
         </ul>
     </nav>
 
     <div class="action-buttons">
 
+        <button class="btn action-button" id="addBtn"><i class="fa fa-plus"></i> Neu</button>
+
         <button class="btn action-button" id="saveBtn"><i class="fa fa-save"></i> Speichern</button>
 
         <button class="btn action-button" id="openBtn"><i class="fa fa-folder-open"></i> Öffnen</button>

js/FSMDocument.js

@@ -60,6 +60,12 @@ class FSMDocument {
         }
     }
 
+    onRightClick(x, y) {
+        if(!selectedObject) {
+
+        }
+    }
+
     deleteCurrentObject() {
         if (!!selectedObject) {
             if (selectedObject instanceof State) {

js/export/export.js

@@ -58,7 +58,6 @@ function parseFromJson(json) {
 
     doc.states = doc.states.map(state => Object.assign(new State(0, 0), state));
     doc.connections = doc.connections.map(connection => {
-        console.log(connection.type);
         switch(connection.type) {
             case 'Connection':
                 connection = Object.assign(new Connection(null, null), connection);
@@ -77,7 +76,6 @@ function parseFromJson(json) {
                 connection = Object.assign(new StartConnection(), connection);
 
                 connection.state = doc.states.find(state => state.id === connection.state);
-                console.log(connection.state);
 
                 break;
         }

js/main.js

@@ -29,7 +29,11 @@ let activeDocument = null;
 
 function switchDocument(doc) {
     if (doc instanceof FSMDocument) {
-        doc = documents.findIndex(document => document === doc);
+        doc = documents.findIndex(document => document.id === doc.id);
+    }
+
+    if(doc < 0) {
+        activeDocument = null;
     }
 
     if (typeof doc === 'number' && doc >= 0 && doc < documents.length) {
@@ -58,11 +62,12 @@ function addDocument(doc) {
     const elem = document.createElement('li');
     elem.classList.add('document-tab');
 
-    elem.addChild('span', 'document-name', doc.name || 'Unbenannt');
+    const label = elem.addChild('span', 'document-name', doc.name || 'Unbenannt');
     const btn = elem.addChild('button', ['btn', 'btn-close'], 'X');
 
-    elem.addEventListener('click', () => {
-        switchDocument(doc);
+    elem.addEventListener('click', (e) => {
+        if(e.target === elem || e.target === label)
+            switchDocument(doc);
     });
 
     btn.addEventListener('click', () => {
@@ -75,8 +80,8 @@ function addDocument(doc) {
 }
 
 function closeDocument(doc) {
-    if (doc instanceof Document) {
-        doc = documents.findIndex(document => document === doc);
+    if (doc instanceof FSMDocument) {
+        doc = documents.findIndex(document => document.id === doc.id);
     }
 
     if (typeof doc === 'number') {
@@ -84,6 +89,15 @@ function closeDocument(doc) {
 
         const docElements = document.getElementsByClassName('document-tab');
         docElements[doc].remove();
+
+        if(doc < activeDocument) {
+            activeDocument--;
+        } else if(doc === activeDocument) {
+            if(activeDocument >= documents.length) {
+                activeDocument = documents.length - 1;
+            }
+        }
+        switchDocument(activeDocument);
     }
 }
 
@@ -126,13 +140,19 @@ function draw() {
 
     if (activeDocument !== null) {
         documents[activeDocument].draw();
-    }
 
-    if (!!currentConnection) {
-        currentConnection.draw();
-    }
+        if (!!currentConnection) {
+            currentConnection.draw();
+        }
 
-    animations.forEach(animation => animation.draw());
+        animations.forEach(animation => animation.draw());
+    } else {
+        ctx.fillStyle = '#eee';
+        ctx.fillRect(0, 0, width, height);
+
+        ctx.fillStyle = '#000';
+        ctx.drawText('Bitte öffne ein Dokument oder erstelle ein neues...', width / 2, height / 2, null, false);
+    }
 
     ctx.restore();
 
@@ -159,6 +179,8 @@ function selectObject(x, y) {
         }
     }
 
+    caretPos = 0;
+
     return null;
 }
 
@@ -259,6 +281,19 @@ canvas.addEventListener('dblclick', (event) => {
     documents[activeDocument].onDblClick(mouse.x, mouse.y);
 });
 
+canvas.addEventListener('contextmenu', (event) => {
+    const mouse = cbRelMousePos(event);
+
+    event.preventDefault();
+
+    if(activeDocument === null)
+        return;
+
+    selectedObject = selectObject(mouse.x, mouse.y);
+
+    documents[activeDocument].onRightClick(mouse.x, mouse.y);
+});
+
 document.addEventListener('keydown', (event) => {
     const key = crossBrowserKey(event);
 
@@ -278,6 +313,8 @@ document.addEventListener('keydown', (event) => {
                 resetCaret();
             }
 
+            event.preventDefault();
+
             return false;
         case 37: // Left Arrow
             if (!(event.ctrlKey || event.metaKey) && !!selectedObject) {
@@ -297,6 +334,23 @@ document.addEventListener('keydown', (event) => {
 
                 return false;
             }
+            break;
+        case 36: // Home
+            if(!(event.ctrlKey || event.metaKey) && !!selectedObject) {
+                caretPos = 0;
+                resetCaret();
+
+                return false;
+            }
+
+            break;
+        case 35: // End
+            if(!(event.ctrlKey || event.metaKey) && !!selectedObject) {
+                caretPos = selectedObject.text.length;
+
+                return false;
+            }
+
             break;
         case 46: // Delete
             if (activeDocument !== null) {

js/menu.js

@@ -108,6 +108,12 @@ document.getElementById('saveBtn').addEventListener('click', () => {
     }
 });
 
+document.getElementById('addBtn').addEventListener('click', () => {
+    const doc = new FSMDocument(null);
+    addDocument(doc);
+    switchDocument(doc);
+});
+
 document.getElementById('openBtn').addEventListener('click', () => {
     modalOpen.open();
 });