Focus

Author: Templarian

src/components/pg/nodeEditorTextArray/nodeEditorTextArray.html

@@ -2,7 +2,7 @@
   <div class="labelAdd">
     <span part="label"></span>
     <button part="add">
-      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><path fill="currentColor" d="M7 2a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2H8v3a1 1 0 1 1-2 0V8H3a1 1 0 0 1 0-2h3V3a1 1 0 0 1 1-1"/></svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="currentColor" d="M7 2a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2H8v3a1 1 0 1 1-2 0V8H3a1 1 0 0 1 0-2h3V3a1 1 0 0 1 1-1"/></svg>
     </button>
   </div>
   <div part="inputs"></div>

src/components/pg/nodeEditorTextArray/nodeEditorTextArray.ts

@@ -31,6 +31,8 @@ export default class PgNodeEditorTextArray extends HTMLElement {
 
   @Prop() #inputs: any[] = [];
 
+  #focusNext = false;
+
   connectedCallback() {
     // Map this.value to list
     this.value.forEach((value) => {
@@ -64,10 +66,39 @@ export default class PgNodeEditorTextArray extends HTMLElement {
             detail: { value: newValue },
           }));
         });
+        $item.addEventListener('inputprevious', (e: any) => {
+          const { index, selectionIndex } = e.detail;
+          const $items = Array.from(this.$inputs.children);
+          if ($items.length > 1) {
+            if (index === 0) {
+              ($items[$items.length - 1] as any).focus();
+            } else {
+              ($items[index - 1] as any).focus();
+            }
+          }
+        });
+        $item.addEventListener('inputnext', (e: any) => {
+          const { index, selectionIndex } = e.detail;
+          const $items = Array.from(this.$inputs.children);
+          if ($items.length > 1) {
+            if (index === $items.length - 1) {
+              ($items[0] as any).focus();
+            } else {
+              ($items[index + 1] as any).focus();
+            }
+          }
+        });
+      },
+      connect: ($item) => {
+        if (this.#focusNext) {
+          $item.focus();
+          this.#focusNext = false;
+        }
       },
     });
 
     this.$add.addEventListener('click', () => {
+      this.#focusNext = true;
       this.#inputs.push({
         key: uuid(),
         value: '',

src/components/pg/nodeInputText/nodeInputText.css

@@ -40,20 +40,35 @@
   z-index: 1;
 }
 
+[part=input]:hover + button,
+[part=input]:focus + button {
+  display: flex;
+}
+
 .hide {
   display: none;
 }
 
+[part=input]:has(+ button:active) {
+  outline-color: #cd2626;
+  border-radius: 0.125rem;
+}
+
+[part=input] + [part=remove]:active {
+  color: #cd2626;
+}
+
 [part=remove] {
+  display: none;
   background: transparent;
   border: 0;
   color: rgba(255, 255, 255, 0.5);
   margin-left: -1rem;
   padding: 0;
-  display: flex;
   align-items: center;
   z-index: 2;
 }
 [part=remove]:hover {
   color: rgba(255, 255, 255, 0.8);
+  display: flex;
 }

src/components/pg/nodeInputText/nodeInputText.html

@@ -1,4 +1,4 @@
 <input type="text" part="input">
 <button part="remove" class="hide">
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none"><path fill="currentColor" d="M9.535 3.05a1 1 0 0 1 1.414 1.415L8.414 6.999l2.536 2.536a1 1 0 0 1-1.415 1.414L7 8.414 4.465 10.95A1.001 1.001 0 0 1 3.05 9.535L5.585 7 3.05 4.464A1 1 0 0 1 4.465 3.05L7 5.585z"/></svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"><path fill="currentColor" d="M9.535 3.05a1 1 0 0 1 1.414 1.415L8.414 6.999l2.536 2.536a1 1 0 0 1-1.415 1.414L7 8.414 4.465 10.95A1.001 1.001 0 0 1 3.05 9.535L5.585 7 3.05 4.464A1 1 0 0 1 4.465 3.05L7 5.585z"/></svg>
 </button>

src/components/pg/nodeInputText/nodeInputText.ts

@@ -10,6 +10,7 @@ import style from './nodeInputText.css';
 })
 export default class PgNodeInputText extends HTMLElement {
 
+  @Prop() index: number;
   @Prop() value: string = '';
   @Prop() name: string = '';
   @Prop() removable: boolean = false;
@@ -30,12 +31,37 @@ export default class PgNodeInputText extends HTMLElement {
       e.stopPropagation();
       this.dispatchEvent(new CustomEvent('input', {
         detail: {
-          value: this.$input.value,
+          index: this.index,
         }
       }));
     });
+    this.$input.addEventListener('keydown', (e: KeyboardEvent) => {
+      if (e.key === 'ArrowUp') {
+        this.dispatchEvent(new CustomEvent('inputprevious', {
+          detail: {
+            index: this.index,
+            selectionStart: this.$input.selectionDirection
+              ? this.$input.selectionStart
+              : this.$input.selectionEnd,
+          }
+        }));
+      } else if (e.key === 'ArrowDown') {
+        this.dispatchEvent(new CustomEvent('inputnext', {
+          detail: {
+            index: this.index,
+            selectionIndex: this.$input.selectionDirection
+              ? this.$input.selectionStart
+              : this.$input.selectionEnd,
+          }
+        }));
+      }
+    });
     this.$remove.addEventListener('click', (e: any) => {
-      this.dispatchEvent(new CustomEvent('remove'));
+      this.dispatchEvent(new CustomEvent('remove', {
+        detail: {
+          index: this.index,
+        }
+      }));
     });
   }