Merge pull request #820 from intechstudio/feat/RuntimeRefactor

Refactored runtime, added path display for CodeBlock

playwright-tests/pages/configPage.js

@@ -81,6 +81,10 @@ export class ConfigPage {
     await this.addActionBlockButton.click();
   }
 
+  async openActionsOnEmptyElement() {
+    await this.noActionAddActionButton.click();
+  }
+
   async addActionBlock(category, blockName) {
     await this.blocks[category][blockName]["block"].click();
   }

playwright-tests/pages/modulePage.js

@@ -85,17 +85,30 @@ export class ModulePage {
       name: "✔️ Events are copied! (Click",
     });
 
-    this.characterLimitPasteToast = page.getByRole("button", {
-      name: "❌ Paste failed! Config limit",
-    });
+    this.characterLimitPasteToast = page.getByText("Modifications can not");
     this.characterLimitAddToast = page.getByText("Modifications can not");
     this.storeButton = page.getByRole("button", { name: "Store" });
+    this.clearButton = page.getByRole("button", { name: "Clear" });
+    this.confirmClearButton = page.getByRole("button", {
+      name: "Confirm",
+      exact: true,
+    });
+    this.discardAllButton = page.getByRole("button", { name: "Discard All" });
   }
 
   async storeConfig() {
     await this.storeButton.click();
   }
 
+  async clearConfig() {
+    await this.clearButton.click();
+    await this.confirmClearButton.click();
+  }
+
+  async discardConfig() {
+    await this.discardAllButton.click();
+  }
+
   async changeModule() {
     await this.changeModuleButton.click();
   }

playwright-tests/tests/actionsOperation.spec.js

@@ -21,6 +21,16 @@ test.describe("Action Block Operations", () => {
     await connectModulePage.openVirtualModules();
     await connectModulePage.addModule("EN16");
   });
+
+  test("Add Action Block to empty element", async () => {
+    await configPage.removeAllActions();
+    await configPage.openActionsOnEmptyElement();
+    await configPage.addActionBlock("led", "Color");
+    await expect(
+      configPage.blocks["led"]["Color"]["elements"]["Blue"]
+    ).toBeVisible();
+  });
+
   test("Copy and Paste", async ({ page }) => {
     const expectedComment = "action operation";
     await configPage.removeAllActions();
@@ -106,6 +116,12 @@ test.describe("Element Operations", () => {
     );
   });
 
+  test("Overwrite element", async ({ page }) => {
+    await configPage.copyElement();
+    await configPage.overwriteElement();
+    await expect(page.locator("#cfg-2")).toBeVisible(); //default last action block is visible
+  });
+
   test("Discard with Event change", async ({ page }) => {
     const notVisibleComment = "Not Exist";
     await configPage.removeAllActions();

playwright-tests/tests/blocksTests.spec.js

@@ -87,6 +87,7 @@ test.describe("NRPN converting", () => {
     await configPage.openAndAddActionBlock("midi", "MIDI NRPN");
     await configPage.writeActionBlockField("midi", "MIDI NRPN", "MSB", "1+2");
     await configPage.writeActionBlockField("midi", "MIDI NRPN", "LSB", "3");
+    await configPage.writeActionBlockField("midi", "MIDI NRPN", "LSB", "3");
     await configPage.selectElementEvent("Button");
     const actualValue = await configPage.getActionBlockFieldValue(
       "midi",
@@ -132,6 +133,12 @@ test.describe("NRPN converting", () => {
       "MSB",
       "x//128"
     );
+    await configPage.writeActionBlockField(
+      "midi",
+      "MIDI NRPN",
+      "LSB",
+      "x//128"
+    );
     await configPage.writeActionBlockField("midi", "MIDI NRPN", "LSB", "x%128");
     await configPage.selectElementEvent("Button");
     const actualValue = await configPage.getActionBlockFieldValue(

playwright-tests/tests/virtualModule.spec.js

@@ -2,14 +2,17 @@ import { test, expect } from "@playwright/test";
 import { ConnectModulePage } from "../pages/connectModulePage";
 import { ModulePage } from "../pages/modulePage";
 import { PAGE_PATH, mockNavigatorSerial } from "../utility";
+import { ConfigPage } from "../pages/configPage";
 
 let connectModulePage;
 let modulePage;
+let configPage;
 
 test.beforeEach(async ({ page }) => {
   await mockNavigatorSerial(page);
   connectModulePage = new ConnectModulePage(page);
   modulePage = new ModulePage(page);
+  configPage = new ConfigPage(page);
   await page.goto(PAGE_PATH);
   await connectModulePage.openVirtualModules();
 });
@@ -68,3 +71,16 @@ test.describe("Add extra module", () => {
     });
   }
 });
+
+test("Clear module fetching config automatically", async ({ page }) => {
+  await connectModulePage.addModule("EF44");
+  await modulePage.clearConfig();
+  await expect(page.locator("#cfg-2")).toBeVisible();
+});
+
+test("Discard module fetching config automatically", async ({ page }) => {
+  await connectModulePage.addModule("EF44");
+  await configPage.removeAllActions();
+  await modulePage.discardConfig();
+  await expect(page.locator("#cfg-2")).toBeVisible();
+});

src/renderer/App.svelte

@@ -233,11 +233,14 @@
     }
   }
 
+  let loaded = false;
+
   //Disable Context Menu
-  onMount(() => {
+  onMount(async () => {
     document.addEventListener("contextmenu", function (event) {
       event.preventDefault();
     });
+    loaded = true;
   });
 
   onDestroy(() => {

src/renderer/config-blocks/ButtonPressRelease_If.svelte

@@ -114,8 +114,6 @@
   export let config;
   export let index;
 
-  export let access_tree;
-
   import LineEditor from "../main/user-interface/LineEditor.svelte";
 
   let sidebarWidth;
@@ -157,7 +155,7 @@
       on:output={(e) => {
         sendData(e.detail.script);
       }}
-      {access_tree}
+      action={config}
       {sidebarWidth}
       value={scriptSegment}
     />

src/renderer/config-blocks/CodeBlock.svelte

@@ -39,30 +39,29 @@
   };
 </script>
 
-<script>
+<script lang="ts">
+  import { GridAction, GridEvent, GridElement } from "./../runtime/runtime";
   import { GridScript } from "@intechstudio/grid-protocol";
 
-  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
 
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
 
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
-  import { monaco_store } from "../main/modals/Monaco.store";
   import { monaco_elementtype } from "../lib/CustomMonaco";
 
   import { monaco_editor } from "$lib/CustomMonaco";
-  import { committed_code_store } from "./Committed_Code.store";
   import { modal } from "../main/modals/modal.store";
   import Monaco from "../main/modals/Monaco.svelte";
+  import { get } from "svelte/store";
 
   const dispatch = createEventDispatcher();
 
-  export let config;
-  export let access_tree;
-  export let index;
+  export let config: GridAction;
+  export let index: number;
 
-  let codePreview;
+  let codePreview: HTMLElement;
 
   const lualogo_foreground = "#808080";
   const lualogo_background = "#212a2c";
@@ -99,44 +98,30 @@
     });
   });
 
-  function displayConfigScript(script) {
+  function displayConfigScript(script: string) {
     codePreview.innerHTML = GridScript.expandScript(script);
     monaco_editor.colorizeElement(codePreview, {
       theme: "my-theme",
       tabSize: 2,
     });
   }
 
-  onMount(() => {
-    codePreview.addEventListener("wheel", (evt) => {
-      //evt.preventDefault();
-      //codePreview.scrollLeft += evt.deltaY;
-    });
-  });
-
-  $: {
-    if (codePreview) {
-      displayConfigScript(config.script);
-    }
+  $: if (codePreview) {
+    displayConfigScript($config.script);
   }
 
-  $: if (typeof $committed_code_store !== "undefined") {
-    if ($committed_code_store.index == index) {
-      dispatch("output", {
-        short: "cb",
-        script: $committed_code_store.script,
-        name: $committed_code_store.name,
-      });
-      $committed_code_store = {};
-    }
-  }
+  onMount(() => {
+    displayConfigScript(config.script);
+  });
 
-  function open_monaco() {
-    $monaco_store = { config: config.makeCopy(), index: index };
-    $monaco_elementtype = access_tree.elementtype;
+  async function open_monaco() {
+    const event = config.parent as GridEvent;
+    const element = event.parent as GridElement;
+    monaco_elementtype.set(element.type);
     modal.show({
       component: Monaco,
       options: { snap: "middle", disableClickOutside: true },
+      args: { monaco_action: config },
     });
   }
 </script>

src/renderer/config-blocks/Condition_End.svelte

@@ -35,8 +35,6 @@
 <script>
   import { createEventDispatcher } from "svelte";
 
-  export let access_tree;
-
   const dispatch = createEventDispatcher();
 </script>
 

src/renderer/config-blocks/ElementName.svelte

@@ -57,7 +57,7 @@
   });
 
   function sendData(e) {
-    dispatch("output", { short: "sn", script: `self:gen("${e}")` });
+    dispatch("output", { short: "sn", script: `self:gen('${e}')` });
   }
 
   const validator = (e) => {

src/renderer/config-blocks/EncoderLeftRight_If.svelte

@@ -70,8 +70,6 @@
   export let config;
   export let index;
 
-  export let access_tree;
-
   import LineEditor from "../main/user-interface/LineEditor.svelte";
 
   let sidebarWidth;
@@ -113,7 +111,7 @@
       on:output={(e) => {
         sendData(e.detail.script);
       }}
-      {access_tree}
+      action={config}
       {sidebarWidth}
       value={scriptSegment}
     />

src/renderer/config-blocks/EncoderPushRot_If.svelte

@@ -53,8 +53,6 @@
   export let config;
   export let index;
 
-  export let access_tree;
-
   import LineEditor from "../main/user-interface/LineEditor.svelte";
 
   let sidebarWidth;
@@ -96,7 +94,7 @@
       on:output={(e) => {
         sendData(e.detail.script);
       }}
-      {access_tree}
+      action={config}
       {sidebarWidth}
       value={scriptSegment}
     />

src/renderer/config-blocks/Function_End.svelte

@@ -35,8 +35,6 @@
 <script>
   import { createEventDispatcher } from "svelte";
 
-  export let access_tree;
-
   const dispatch = createEventDispatcher();
 </script>
 

src/renderer/config-blocks/GamePadAxis.svelte

@@ -57,10 +57,10 @@
   import { GridScript } from "@intechstudio/grid-protocol";
 
   import { Script } from "./_script_parsers.js";
-  import { LocalDefinitions } from "../runtime/runtime.store.js";
+  import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store.js";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
 
   import { Validator } from "./_validators.js";
 
@@ -119,10 +119,10 @@
     [],
   ];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {

src/renderer/config-blocks/GamePadButton.svelte

@@ -56,7 +56,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store.js";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { Script } from "./_script_parsers.js";
   import { Validator } from "./_validators.js";
   import { LocalDefinitions } from "../runtime/runtime.store";
@@ -147,10 +147,10 @@
     ],
   ];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {

src/renderer/config-blocks/LedAnimationStart.svelte

@@ -57,7 +57,7 @@
 
   import { Validator } from "./_validators";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
 
   export let config;
   export let humanScript;
@@ -148,10 +148,10 @@
 
   let suggestions = [];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });