Progress

Author: Templarian

package-lock.json

@@ -28,7 +28,7 @@
     "@pictogrammers/element-esbuild": "^0.0.20",
     "@pictogrammers/element-jest": "^0.1.10",
     "@pictogrammers/fnt": "^1.2.0",
-    "@pictogrammers/node-connector": "^0.9.9",
+    "@pictogrammers/node-connector": "^0.9.11",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",

package.json

@@ -71,8 +71,12 @@ export default class PgNodeEditorTextArray extends HTMLElement {
           const $items = Array.from(this.$inputs.children);
           if ($items.length > 1) {
             if (index === 0) {
+              ($items[$items.length - 1] as any).selectionStart = selectionIndex;
+              ($items[$items.length - 1] as any).selectionEnd = selectionIndex;
               ($items[$items.length - 1] as any).focus();
             } else {
+              ($items[index - 1] as any).selectionStart = selectionIndex;
+              ($items[index - 1] as any).selectionEnd = selectionIndex;
               ($items[index - 1] as any).focus();
             }
           }
@@ -82,8 +86,12 @@ export default class PgNodeEditorTextArray extends HTMLElement {
           const $items = Array.from(this.$inputs.children);
           if ($items.length > 1) {
             if (index === $items.length - 1) {
+              ($items[0] as any).selectionStart = selectionIndex;
+              ($items[0] as any).selectionEnd = selectionIndex;
               ($items[0] as any).focus();
             } else {
+              ($items[index + 1] as any).selectionStart = selectionIndex;
+              ($items[index + 1] as any).selectionEnd = selectionIndex;
               ($items[index + 1] as any).focus();
             }
           }

src/components/pg/nodeEditorTextArray/nodeEditorTextArray.ts

@@ -37,19 +37,21 @@ export default class PgNodeInputText extends HTMLElement {
     });
     this.$input.addEventListener('keydown', (e: KeyboardEvent) => {
       if (e.key === 'ArrowUp') {
+        e.preventDefault();
         this.dispatchEvent(new CustomEvent('inputprevious', {
           detail: {
             index: this.index,
-            selectionStart: this.$input.selectionDirection
+            selectionIndex: this.$input.selectionDirection === 'forward'
               ? this.$input.selectionStart
               : this.$input.selectionEnd,
           }
         }));
       } else if (e.key === 'ArrowDown') {
+        e.preventDefault();
         this.dispatchEvent(new CustomEvent('inputnext', {
           detail: {
             index: this.index,
-            selectionIndex: this.$input.selectionDirection
+            selectionIndex: this.$input.selectionDirection === 'forward'
               ? this.$input.selectionStart
               : this.$input.selectionEnd,
           }
@@ -77,4 +79,18 @@ export default class PgNodeInputText extends HTMLElement {
   focus() {
     this.$input.focus();
   }
+
+  get selectionStart(){
+    return this.$input.selectionStart || 0;
+  }
+  set selectionStart(value: number) {
+    this.$input.selectionStart = value;
+  }
+
+  get selectionEnd(){
+    return this.$input.selectionEnd || 0;
+  }
+  set selectionEnd(value: number) {
+    this.$input.selectionEnd = value;
+  }
 }

src/components/pg/nodeInputText/nodeInputText.ts

@@ -62,6 +62,10 @@ export default class PgNodes extends HTMLElement {
     connector.bridgeColor = '#0a0c14';
     this.#connector = connector;
 
+    connector.on('create', (event) => {
+      const { x, y, sourceY, sourceNodeId, sourceKey } = event;
+      console.log(x, y, sourceY, sourceNodeId, sourceKey);
+    });
     connector.on('change', (change) => {
       console.log(change.type, change.sourceNodeId, change.sourceKey, change.targetNodeId, change.targetKey);
       const targetNodeId = parseInt(change.targetNodeId, 10);