chore: cursormove refactor

Composer/packages/extensions/visual-designer/.eslintrc.js

@@ -6,6 +6,7 @@ module.exports = {
   },
   rules: {
     '@typescript-eslint/explicit-member-accessibility': 'off',
-    '@typescript-eslint/no-use-before-define': ['warn', { functions: false, classes: true }],
+    '@typescript-eslint/no-use-before-define': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
   },
 };

Composer/packages/extensions/visual-designer/demo/src/stories/VisualEditorDemo.js

@@ -83,7 +83,7 @@ export class VisualEditorDemo extends Component {
               data={obiJson}
               dialogId={selectedFile}
               focusedEvent={focusedEvent}
-              focusedSteps={focusedSteps}
+              focusedActions={focusedSteps}
               focusedTab={focusedTab}
               clipboardActions={clipboardActions}
               shellApi={{

Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx

@@ -22,10 +22,11 @@ import {
   pasteNodes,
   deleteNodes,
 } from '../utils/jsonTracker';
-import { moveCursor } from '../utils/cursorTracker';
+import { moveCursor, querySelectableElements, SelectorElement } from '../utils/cursorTracker';
 import { NodeIndexGenerator } from '../utils/NodeIndexGetter';
 import { normalizeSelection } from '../utils/normalizeSelection';
 import { KeyboardZone } from '../components/lib/KeyboardZone';
+import { scrollNodeIntoView } from '../utils/nodeOperation';
 
 import { AdaptiveDialogEditor } from './AdaptiveDialogEditor';
 
@@ -228,10 +229,7 @@ export const ObiEditor: FC<ObiEditorProps> = ({
     },
   });
 
-  const querySelectableElements = (): NodeListOf<HTMLElement> => {
-    return document.querySelectorAll(`[${AttrNames.SelectableElement}]`);
-  };
-  const [selectableElements, setSelectableElements] = useState<NodeListOf<HTMLElement>>(querySelectableElements());
+  const [selectableElements, setSelectableElements] = useState<SelectorElement[]>(querySelectableElements());
 
   const getClipboardTargetsFromContext = (): string[] => {
     const selectedActionIds = normalizeSelection(selectionContext.selectedIds);
@@ -283,6 +281,7 @@ export const ObiEditor: FC<ObiEditorProps> = ({
           selectedIds: [selected as string],
         });
         focused && onFocusSteps([focused], tab);
+        scrollNodeIntoView(`[${AttrNames.SelectedId}="${selected}"]`);
         break;
       }
       case KeyboardPrimaryTypes.Operation: {

Composer/packages/extensions/visual-designer/src/utils/cursorTracker/arrowMove.ts

@@ -0,0 +1,57 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { KeyboardCommandTypes } from '../../constants/KeyboardCommandTypes';
+
+import { locateNearestElement } from './locateElement';
+import { SelectorElement, Direction } from './type';
+
+export function handleArrowkeyMove(
+  currentElement: SelectorElement,
+  selectableElements: SelectorElement[],
+  command: string
+) {
+  let element: SelectorElement = currentElement;
+  let direction: Direction;
+  let filterAttrs: string[] = [];
+
+  switch (command) {
+    case KeyboardCommandTypes.Cursor.MoveDown:
+      direction = Direction.Down;
+      filterAttrs = ['isNode'];
+      break;
+    case KeyboardCommandTypes.Cursor.MoveUp:
+      direction = Direction.Up;
+      filterAttrs = ['isNode'];
+      break;
+    case KeyboardCommandTypes.Cursor.MoveLeft:
+      direction = Direction.Left;
+      filterAttrs = ['isNode'];
+      break;
+    case KeyboardCommandTypes.Cursor.MoveRight:
+      direction = Direction.Right;
+      filterAttrs = ['isNode'];
+      break;
+    case KeyboardCommandTypes.Cursor.ShortMoveDown:
+      direction = Direction.Down;
+      filterAttrs = ['isNode', 'isEdgeMenu'];
+      break;
+    case KeyboardCommandTypes.Cursor.ShortMoveUp:
+      direction = Direction.Up;
+      filterAttrs = ['isNode', 'isEdgeMenu'];
+      break;
+    case KeyboardCommandTypes.Cursor.ShortMoveLeft:
+      direction = Direction.Left;
+      filterAttrs = ['isNode', 'isEdgeMenu'];
+      break;
+    case KeyboardCommandTypes.Cursor.ShortMoveRight:
+      direction = Direction.Right;
+      filterAttrs = ['isNode', 'isEdgeMenu'];
+      break;
+    default:
+      return element;
+  }
+  element = locateNearestElement(currentElement, selectableElements, direction, filterAttrs);
+
+  return element;
+}