Merge branch 'main' into feature_groupSelection_rebased

.eslintrc.js

@@ -15,5 +15,6 @@ module.exports = {
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "prettier/prettier": "warn",
   },
 };

CHANGELOG.md

@@ -1,5 +1,12 @@
 # easyNWK Version History
 
+## version 2.0.3
+
+* (feature) add alter with double click on map
+* (usability) Escape key closes edit alter form and optionally cancels add alter
+* (usability) double click works within edit alter location
+* (security) large update of libraries
+
 ## version 2.0.2, released 24 Sep 2022
 
 * (feature) print all entered data or copy to text editor #47

package.json

@@ -1,6 +1,6 @@
 {
   "name": "easynwk",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "private": true,
   "author": "Alexander Rind (https://github.com/alex-rind/)",
   "repository": "https://github.com/fhstp/easynwk-web/",

src/components/AlteriConnectionList.vue

@@ -40,9 +40,10 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, onMounted } from "vue";
 import { useStore } from "@/store";
 import { isConnectable } from "@/data/Alter";
+import { TAB_CONNECTIONS } from "@/store/viewOptionsModule";
 
 export default defineComponent({
   props: {
@@ -81,6 +82,16 @@ export default defineComponent({
       );
     });
 
+    onMounted(() => {
+      document.onkeydown = (event: KeyboardEvent) => {
+        if (event.key === "Escape" || event.key === "Esc") {
+          if (store.state.view.editTab === TAB_CONNECTIONS) {
+            store.commit("view/closeAlterForm");
+          }
+        }
+      };
+    });
+
     return {
       altersConnected,
       altersNotConnected,

src/components/AlteriEditForm.vue

@@ -237,6 +237,7 @@ import { Alter, hasOptionalChanges, isConnectable } from "@/data/Alter";
 import { Gender } from "@/data/Gender";
 import { Roles } from "@/data/Roles";
 import { SYMBOL_DECEASED } from "@/assets/utils";
+import { TAB_BASE } from "@/store/viewOptionsModule";
 
 type InputType = HTMLInputElement | HTMLTextAreaElement;
 
@@ -376,6 +377,11 @@ export default defineComponent({
             document.activeElement.blur();
           }
 
+          // check if form is open isEditMode (see #97)
+          if (store.state.view.editTab !== TAB_BASE) {
+            return;
+          }
+
           if (invalidName.value || invalidPosition.value) {
             // TODO asking maybe not necessary because of undo?
             let remove = true;

src/store/index.ts

@@ -76,7 +76,10 @@ const mutations = {
     // console.log("cancel " + alterIndex);
 
     // canceled alter is new and therefore cannot have connections
-    state.nwk.alteri.splice(alterIndex, 1);
+    // don't delete with index null value (see #97)
+    if (alterIndex !== null) {
+      state.nwk.alteri.splice(alterIndex, 1);
+    }
 
     state.view.editIndex = null;
     state.view.editTab = "";

src/store/localStoragePlugin.ts

@@ -19,7 +19,7 @@ export interface IUnReDoState {
 
 export function loadStateFromStore(): string {
   const storedNWK = localStorage.getItem(STORAGE_KEY);
-  if (storedNWK != null) {
+  if (storedNWK != null && storedNWK != "undefined") {
     return storedNWK;
   } else {
     return initNWKasJSON();

src/store/nwkModule.ts

@@ -48,9 +48,6 @@ const mutations = {
     // remove connections to/from alter
     removeAllConnections(state, alterIndex);
 
-    // old code
-    // this.alteri = this.alteri.filter((item) => item.id !== alterToRemove.id);
-
     // based on vuex\examples\composition\todomvc\store\mutations.js
     state.alteri.splice(alterIndex, 1);
   },

src/views/HomeView.vue

@@ -21,7 +21,7 @@
 
             <AlteriPanel v-if="!egoEditMode" :mapclicked="mapclicked" />
             <ViewOptionsPanel />
-            <StatisticsPanel v-if="$store.state.view.statistics" />
+            <StatisticsPanel v-if="showStatistics" />
           </div>
         </div>
       </div>
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, ref, computed } from "vue";
 import { useStore } from "@/store";
 
 // @ is an alias to /src
@@ -91,6 +91,7 @@ export default defineComponent({
       egoEditMode,
       editEgoFinished,
       mapclick,
+      showStatistics: computed(() => store.state.view.statistics),
     };
   },
 });