fix: tab focus

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuerd",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "ERD editor",
   "main": "dist/vuerd.cjs.js",
   "module": "dist/vuerd.esm.js",
@@ -42,24 +42,24 @@
     "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.11.5",
     "@babel/preset-typescript": "^7.10.4",
-    "@dineug/sql-ddl-parser": "^0.1.1",
-    "@fortawesome/free-solid-svg-icons": "^5.14.0",
+    "@dineug/sql-ddl-parser": "^0.1.2",
+    "@fortawesome/free-solid-svg-icons": "^5.15.0",
     "@mdi/js": "^5.6.55",
-    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-strip": "^2.0.0",
     "@rollup/plugin-typescript": "^6.0.0",
-    "@storybook/addon-actions": "^6.0.21",
-    "@storybook/addon-console": "^1.2.1",
-    "@storybook/addon-google-analytics": "^6.0.21",
-    "@storybook/addon-storysource": "^6.0.21",
-    "@storybook/html": "^6.0.21",
-    "@storybook/theming": "^6.0.21",
+    "@storybook/addon-actions": "^6.0.22",
+    "@storybook/addon-console": "^1.2.2",
+    "@storybook/addon-google-analytics": "^6.0.22",
+    "@storybook/addon-storysource": "^6.0.22",
+    "@storybook/html": "^6.0.22",
+    "@storybook/theming": "^6.0.22",
     "@types/d3": "^5.7.2",
     "@types/dom-to-image": "^2.6.2",
     "@types/jest": "^26.0.14",
-    "@typescript-eslint/eslint-plugin": "^4.1.1",
-    "@typescript-eslint/parser": "^4.1.1",
+    "@typescript-eslint/eslint-plugin": "^4.3.0",
+    "@typescript-eslint/parser": "^4.3.0",
     "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-inline-json-import": "^0.3.2",
@@ -68,16 +68,16 @@
     "codecov": "^3.7.2",
     "d3": "^5.16.0",
     "dom-to-image": "^2.6.0",
-    "eslint": "^7.9.0",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint": "^7.10.0",
+    "eslint-config-prettier": "^6.12.0",
     "eslint-plugin-prettier": "^3.1.4",
     "highlight.js": "^10.2.0",
     "highlightjs-graphql": "^1.0.2",
     "jest": "^26.4.2",
     "lit-element": "^2.4.0",
     "lit-html": "^1.3.0",
     "prettier": "^2.1.2",
-    "rollup": "^2.27.1",
+    "rollup": "^2.28.2",
     "rollup-plugin-browsersync": "^1.1.0",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-generate-html-template": "^1.7.0",

src/ts/components/ERD.ts

@@ -220,7 +220,24 @@ class ERD extends EditorElement {
 
         if (focusTable !== null && event.key === "Tab") {
           event.preventDefault();
-          store.dispatch(focusMoveTable("ArrowRight", event.shiftKey));
+          store.dispatch(focusMoveTable("Tab", event.shiftKey));
+          // TODO: Refactoring edit
+          setTimeout(() => {
+            if (
+              ![
+                "columnUnique",
+                "columnAutoIncrement",
+                "columnNotNull",
+              ].includes(focusTable.currentFocus)
+            ) {
+              store.dispatch(
+                editTableCommand(
+                  focusTable.currentFocusId,
+                  focusTable.currentFocus
+                )
+              );
+            }
+          }, 0);
         }
 
         if (focusTable !== null && keymapMatch(event, keymap.edit)) {

src/ts/components/Grid.ts

@@ -38,7 +38,6 @@ import {
   selectAllFilterState,
 } from "@src/core/command/editor";
 import {
-  createGridData,
   SimpleOption,
   changeColumnOptionList,
   currentColumnOptionList,
@@ -285,7 +284,16 @@ class Grid extends EditorElement {
 
         if (filterActive && focusFilter !== null && event.key === "Tab") {
           event.preventDefault();
-          store.dispatch(focusMoveFilter("ArrowRight", event.shiftKey));
+          store.dispatch(focusMoveFilter("Tab", event.shiftKey));
+          // TODO: Refactoring edit
+          setTimeout(() => {
+            store.dispatch(
+              editFilterCommand(
+                focusFilter.currentFocus,
+                focusFilter.currentFocusId
+              )
+            );
+          }, 0);
         }
 
         if (filterActive && keymapMatch(event, keymap.addColumn)) {

src/ts/core/Keymap.ts

@@ -11,7 +11,12 @@ export const moveKeys: MoveKey[] = [
   "ArrowDown",
   "ArrowLeft",
 ];
-export type MoveKey = "ArrowUp" | "ArrowRight" | "ArrowDown" | "ArrowLeft";
+export type MoveKey =
+  | "ArrowUp"
+  | "ArrowRight"
+  | "ArrowDown"
+  | "ArrowLeft"
+  | "Tab";
 
 export type RelationshipKeymapName =
   | "relationshipZeroOne"

src/ts/core/dataType/MSSQL.ts

@@ -31,6 +31,7 @@ export const MSSQLTypes: DataTypeHint[] = [
   { name: "text", primitiveType: "lob" },
   { name: "time", primitiveType: "time" },
   { name: "tinyint", primitiveType: "int" },
+  { name: "uniqueidentifier", primitiveType: "string" },
   { name: "varbinary", primitiveType: "string" },
   { name: "varchar", primitiveType: "string" },
   { name: "xml", primitiveType: "lob" },

src/ts/core/model/FocusColumnModel.ts

@@ -50,6 +50,8 @@ export interface FocusColumn {
   focus(focusType: FocusType): void;
   nextFocus(): void;
   preFocus(): void;
+  isLastFocus(): boolean;
+  isFirstFocus(): boolean;
 }
 
 export class FocusColumnModel implements FocusColumn {
@@ -125,4 +127,24 @@ export class FocusColumnModel implements FocusColumn {
       this[focusColumnKey] = true;
     }
   }
+
+  isLastFocus(): boolean {
+    const focusType = this.currentFocus;
+    if (focusType) {
+      const focusTypes = this.currentFocusShowList;
+      const index = focusTypes.indexOf(focusType);
+      return index === focusTypes.length - 1;
+    }
+    return false;
+  }
+
+  isFirstFocus(): boolean {
+    const focusType = this.currentFocus;
+    if (focusType) {
+      const focusTypes = this.currentFocusShowList;
+      const index = focusTypes.indexOf(focusType);
+      return index === 0;
+    }
+    return false;
+  }
 }

src/ts/core/model/FocusFilterModel.ts

@@ -9,6 +9,7 @@ import {
   FocusMoveFilter,
   FocusTargetFilter,
   FocusTargetFilterState,
+  addFilterState,
 } from "../command/editor";
 import {
   selectAllFilterState,
@@ -52,9 +53,11 @@ export class FocusFilterModel implements FocusFilter {
   private _currentFocusFilterState: FocusFilterState | null = null;
   private _subscriptionList: Subscription[] = [];
   private _filterStateList: FilterState[];
+  private _store: Store;
 
   constructor(filterStateList: FilterState[], store: Store) {
     this._filterStateList = filterStateList;
+    this._store = store;
     filterStateList.forEach((filterState) => {
       this.focusFilterStateList.push(new FocusFilterStateModel(filterState));
     });
@@ -179,6 +182,52 @@ export class FocusFilterModel implements FocusFilter {
           this._currentFocusFilterState.nextFocus();
         }
         break;
+      case "Tab":
+        if (focusMoveFilter.shiftKey) {
+          this.move({
+            moveKey: "ArrowLeft",
+            shiftKey: false,
+          });
+          if (
+            this._currentFocusFilterState &&
+            this._currentFocusFilterState.isLastFocus()
+          ) {
+            this.move({
+              moveKey: "ArrowUp",
+              shiftKey: false,
+            });
+          }
+        } else {
+          this.move({
+            moveKey: "ArrowRight",
+            shiftKey: false,
+          });
+          if (this._currentFocusFilterState) {
+            const index = getIndex(
+              this.focusFilterStateList,
+              this._currentFocusFilterState.id
+            );
+            const isLast = index === this.focusFilterStateList.length - 1;
+            if (isLast && this._currentFocusFilterState.isFirstFocus()) {
+              this._store.dispatch(addFilterState());
+            } else if (this._currentFocusFilterState.isFirstFocus()) {
+              this.move({
+                moveKey: "ArrowDown",
+                shiftKey: false,
+              });
+            }
+          } else {
+            if (this.focusFilterStateList.length === 0) {
+              this._store.dispatch(addFilterState());
+            } else {
+              this.move({
+                moveKey: "ArrowDown",
+                shiftKey: false,
+              });
+            }
+          }
+        }
+        break;
     }
     this._observeCall = !this._observeCall;
   }

src/ts/core/model/FocusFilterStateModel.ts

@@ -33,6 +33,8 @@ export interface FocusFilterState {
   focus(focusType: FocusType): void;
   nextFocus(): void;
   preFocus(): void;
+  isLastFocus(): boolean;
+  isFirstFocus(): boolean;
 }
 
 export class FocusFilterStateModel implements FocusFilterState {
@@ -96,4 +98,22 @@ export class FocusFilterStateModel implements FocusFilterState {
       this[focusFilterStateKey] = true;
     }
   }
+
+  isLastFocus(): boolean {
+    const focusType = this.currentFocus;
+    if (focusType) {
+      const index = focusTypes.indexOf(focusType);
+      return index === focusTypes.length - 1;
+    }
+    return false;
+  }
+
+  isFirstFocus(): boolean {
+    const focusType = this.currentFocus;
+    if (focusType) {
+      const index = focusTypes.indexOf(focusType);
+      return index === 0;
+    }
+    return false;
+  }
 }

src/ts/core/model/FocusTableModel.ts

@@ -7,7 +7,9 @@ import {
   FocusMoveTable,
   FocusTargetTable,
   FocusTargetColumn,
+  findActiveEnd,
 } from "../command/editor";
+import { addColumn } from "../command/column";
 import {
   focusEnd,
   focusColumnEnd,
@@ -201,6 +203,52 @@ export class FocusTableModel implements FocusTable {
           this._currentFocusColumn.nextFocus();
         }
         break;
+      case "Tab":
+        if (focusMoveTable.shiftKey) {
+          this.move({
+            moveKey: "ArrowLeft",
+            shiftKey: false,
+          });
+          if (
+            this._currentFocusColumn &&
+            this._currentFocusColumn.isLastFocus()
+          ) {
+            this.move({
+              moveKey: "ArrowUp",
+              shiftKey: false,
+            });
+          }
+        } else {
+          this.move({
+            moveKey: "ArrowRight",
+            shiftKey: false,
+          });
+          if (this._currentFocusColumn === null && this.focusName) {
+            if (this.focusColumns.length === 0) {
+              this._store.dispatch(addColumn(this._store), findActiveEnd());
+            } else {
+              this.move({
+                moveKey: "ArrowDown",
+                shiftKey: false,
+              });
+            }
+          } else if (this._currentFocusColumn) {
+            const columnIndex = getIndex(
+              this.focusColumns,
+              this._currentFocusColumn.id
+            );
+            const isLastColumn = columnIndex === this.focusColumns.length - 1;
+            if (isLastColumn && this._currentFocusColumn.isFirstFocus()) {
+              this._store.dispatch(addColumn(this._store), findActiveEnd());
+            } else if (this._currentFocusColumn.isFirstFocus()) {
+              this.move({
+                moveKey: "ArrowDown",
+                shiftKey: false,
+              });
+            }
+          }
+        }
+        break;
     }
     this._observeCall = !this._observeCall;
   }