Merge commit '40ad1015c111012f5425a72609a8a7d615bb4215' into DANIM113…

…0/package-manager-versioning

package.json

@@ -13,7 +13,6 @@
   },
   "devDependencies": {
     "@electron/notarize": "^2.1.0",
-    "@intechstudio/grid-uikit": "^0.0.2",
     "@playwright/test": "^1.42.0",
     "@sveltejs/vite-plugin-svelte": "^2.4.5",
     "@types/node": "^20.11.21",
@@ -40,6 +39,7 @@
     "vite-plugin-monaco-editor": "^1.1.0"
   },
   "dependencies": {
+    "@intechstudio/grid-uikit": "^0.0.4",
     "adm-zip": "^0.5.10",
     "chokidar": "^3.5.3",
     "discord.js": "^13.6.0",

src/renderer/config-blocks/CodeBlock.svelte

@@ -154,7 +154,10 @@
   function open_monaco() {
     $monaco_store = { config: config.makeCopy(), index: index };
     $monaco_elementtype = access_tree.elementtype;
-    modal.show(Monaco, { snap: "middle", disableClickOutside: true });
+    modal.show({
+      component: Monaco,
+      options: { snap: "middle", disableClickOutside: true },
+    });
   }
 </script>
 

src/renderer/config-blocks/headers/ForLoopHeader.svelte

@@ -84,6 +84,7 @@
   }
 
   function handleInputFieldChange(e, i) {
+    data[i].value = e.detail;
     const shortData = data.map((e) => stringManipulation.shortify(e.value));
     const segments = [shortData[0] + "=" + shortData[1], ...shortData.slice(2)];
     dispatch("output", {
@@ -103,7 +104,7 @@
   <div class="flex flex-row flex-grow items-center gap-2 text-white py-1">
     <span class="">Repeat for</span>
     <div
-      class="bg-secondary p-1 my-auto mr-1 rounded flex items-center flex-grow h-full w-10"
+      class="bg-secondary my-auto mr-1 rounded flex items-center flex-grow h-full w-10"
       on:click|stopPropagation
     >
       {#key displayValue}
@@ -134,7 +135,7 @@
               {#each data as obj, i}
                 <AtomicInput
                   class="flex h-7"
-                  bind:inputValue={obj.value}
+                  inputValue={obj.value}
                   suggestions={obj.suggestions}
                   validator={obj.validator}
                   on:validator={(e) => {

src/renderer/main/modals/AddVirtualModule.svelte

@@ -25,13 +25,24 @@
     { id: ModuleType.TEK2, component: TEK2 },
   ];
 
+  let [dx, dy]: number[] = [0, 0];
+
+  $: {
+    const args = $modal.args;
+    dx = args?.dx ?? 0;
+    dy = args?.dy ?? 0;
+  }
+
   let selectedModule: number = -1;
 
   function handleAddClicked(e) {
-    if (get(runtime).length > 0) {
-      runtime.destroy_module(0, 0);
+    const rt = get(runtime);
+    if (typeof rt.find((e) => e.dx === dx && e.dy === dy) !== "undefined") {
+      runtime.destroy_module(dx, dy);
     }
     runtime.addVirtualModule({
+      dx: dx,
+      dy: dy,
       type: devices[selectedModule].id,
     });
     modal.close();

src/renderer/main/modals/modal.store.ts

@@ -12,9 +12,12 @@ export type ModalOptions = {
   disableClickOutside?: boolean;
 };
 
+export type ModalArguments = any | undefined;
+
 type ModalStoreValue = {
   component: unknown;
   options: ModalOptions;
+  args: ModalArguments;
 };
 
 const defaultOptions: ModalOptions = {
@@ -25,13 +28,21 @@ const defaultOptions: ModalOptions = {
 function createModalStore() {
   const store = writable<ModalStoreValue | undefined>(undefined);
 
-  function show(
-    component: unknown,
-    options: ModalOptions = defaultOptions
-  ): void {
-    store.set({ component: component, options: options } as ModalStoreValue);
+  function show({
+    component,
+    options = defaultOptions,
+    args,
+  }: {
+    component: unknown;
+    options?: ModalOptions;
+    args?: ModalArguments;
+  }): void {
+    store.set({
+      component: component,
+      options: options,
+      args: args,
+    } as ModalStoreValue);
   }
-
   function close(): void {
     store.set(undefined);
   }

src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte

@@ -138,7 +138,7 @@
   }
 
   function handleShowCode(e) {
-    modal.show(Export);
+    modal.show({ component: Export });
   }
 </script>
 

src/renderer/main/panels/configuration/Configuration.svelte

@@ -321,6 +321,12 @@
       mandatory: false,
     });
   }
+
+  function handleSelectActionBlock(index) {
+    const configs = get(configManager);
+    const config = configs[index];
+    selectAction(index, !config.selected);
+  }
 </script>
 
 <configuration class="w-full h-full flex flex-col bg-primary">
@@ -395,9 +401,8 @@
                 {/key}
                 <div class="flex flex-row justify-between relative">
                   <div
-                    class="bg-white absolute h-full opacity-10 pointer-events-none z-10"
+                    class="w-full bg-white absolute h-full opacity-10 pointer-events-none z-10"
                     class:hidden={!config.selected}
-                    style="width: calc(100% + 6px);"
                   />
 
                   <DynamicWrapper
@@ -406,9 +411,12 @@
                     {access_tree}
                     on:update={handleConfigUpdate}
                     on:replace={handleReplace}
+                    on:select={() => {
+                      handleSelectActionBlock(index);
+                    }}
                   />
 
-                  <div class="z-20 flex items-center">
+                  <div class="z-20 flex items-center mr-2">
                     <Options
                       {index}
                       bind:selected={config.selected}

src/renderer/main/panels/configuration/components/ControlSurface.svelte

@@ -102,18 +102,6 @@
     });
   }
 
-  onMount(() => {
-    document.addEventListener("mousedown", handleMouseEvent);
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseEvent);
-  });
-
-  onDestroy(() => {
-    document.removeEventListener("mousedown", handleMouseEvent);
-    document.removeEventListener("mousemove", handleMouseMove);
-    document.removeEventListener("mouseup", handleMouseEvent);
-  });
-
   function handleMouseLeave(e) {
     handleKeyUp(e);
     handleMouseUp(e);
@@ -127,6 +115,9 @@
   id="surface"
   class="absolute w-full h-full z-[1]"
   on:mouseleave={handleMouseLeave}
+  on:mousemove={handleMouseMove}
+  on:mousedown={handleMouseEvent}
+  on:mouseup={handleMouseEvent}
   class:pointer-events-none={!trackMouse}
   class:cursor-grabbing={dragMouse}
   class:cursor-grab={trackMouse}

src/renderer/main/panels/configuration/components/DynamicWrapper.svelte

@@ -34,6 +34,7 @@
 
   let syntaxError = false;
   let validationError = false;
+  let ctrlIsDown = false;
 
   const dispatch = createEventDispatcher();
 
@@ -84,9 +85,36 @@
       lastOpenedActionblocksRemove(config.short);
     }
   }
+
+  function handleCarouselClicked(e) {
+    if (e.ctrlKey) {
+      dispatch("select");
+    } else {
+      handleToggle(e);
+    }
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === "Control") {
+      ctrlIsDown = true;
+    }
+  }
+
+  function handleKeyUp(e) {
+    if (e.key === "Control") {
+      ctrlIsDown = false;
+    }
+  }
 </script>
 
-<wrapper class="flex flex-grow border-none outline-none">
+<svelte:window on:keydown={handleKeyDown} on:keyup={handleKeyUp} />
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<wrapper
+  class="flex flex-grow border-none outline-none"
+  class:cursor-pointer={ctrlIsDown}
+>
   {#each Array(config.indentation >= 0 ? config.indentation : 0) as n}
     <div style="width: 15px" class="flex items-center mx-1">
       <div class="w-3 h-3 rounded-full bg-secondary" />
@@ -101,7 +129,7 @@
     config-type={config.information.type}
     config-id={index}
     movable={config.information.movable}
-    on:click|self={handleToggle}
+    on:click|self={handleCarouselClicked}
   >
     <!-- Face of the config block, with disabled pointer events (Except for input fields) -->
     <!-- TODO: Make marking when the block has unsaved changes  -->

src/renderer/main/panels/configuration/components/ExportConfigs.svelte

@@ -8,7 +8,7 @@
   <button
     id="open-export-modal"
     on:click|preventDefault={() => {
-      modal.show(Export);
+      modal.show({ component: Export });
     }}
     class="p-1 flex cursor-pointer focus:ring-1 focus:outline-none items-center hover:bg-select bg-secondary rounded"
   >

src/renderer/main/panels/configuration/components/MultiSelect.svelte

@@ -229,7 +229,7 @@
       </div>
     </MoltenPushButton>
 
-    <div class="flex items-center ml-auto">
+    <div class="flex items-center ml-auto mr-2">
       <Options
         bind:selected={selectAllChecked}
         halfSelected={isSelection}

src/renderer/main/panels/preferences/Preferences.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { modal } from "./../../modals/modal.store.ts";
+  import AddVirtualModule from "./../../modals/AddVirtualModule.svelte";
   import { configManager } from "./../configuration/Configuration.store.js";
   import { logger } from "./../../../runtime/runtime.store.js";
   import { writable, get } from "svelte/store";
@@ -19,8 +21,10 @@
     MeltSelect,
     MoltenButton,
     MoltenInput,
+    BlockColumn,
   } from "@intechstudio/grid-uikit";
   import { reduced_motion_store } from "../../../runtime/animations.js";
+  import MoltenPushButton, { ButtonSnap } from "./MoltenPushButton.svelte";
 
   const configuration = window.ctxProcess.configuration();
 
@@ -83,6 +87,24 @@
   ];
 
   let activePreferenceMenu = PreferenceMenu.GENERAL;
+
+  let virtualModuleDX: string = "0";
+  let virtualModuleDY: string = "0";
+
+  function handleAddVirtualModuleClicked() {
+    modal.show({
+      component: AddVirtualModule,
+      args: { dx: Number(virtualModuleDX), dy: Number(virtualModuleDY) },
+    });
+  }
+
+  function handleRemoveVirtualModuleClicked() {
+    const rt = get(runtime);
+    const [dx, dy] = [Number(virtualModuleDX), Number(virtualModuleDY)];
+    if (typeof rt.find((e) => e.dx === dx && e.dy === dy) !== "undefined") {
+      runtime.destroy_module(dx, dy);
+    }
+  }
 </script>
 
 <div
@@ -393,6 +415,31 @@
       </BlockRow>
     </Block>
 
+    <Block>
+      <BlockTitle>Virtual Module Management</BlockTitle>
+      <BlockBody
+        >Additional modules can be added or removed on a given coordinate.</BlockBody
+      >
+      <BlockRow>
+        <BlockBody>DX</BlockBody>
+        <MoltenInput bind:target={virtualModuleDX} />
+        <BlockBody>DY</BlockBody>
+        <MoltenInput bind:target={virtualModuleDY} />
+      </BlockRow>
+      <BlockColumn>
+        <MoltenPushButton
+          text={"Add"}
+          snap={ButtonSnap.FULL}
+          on:click={handleAddVirtualModuleClicked}
+        />
+        <MoltenPushButton
+          text={"Remove"}
+          snap={ButtonSnap.FULL}
+          on:click={handleRemoveVirtualModuleClicked}
+        />
+      </BlockColumn>
+    </Block>
+
     <Block>
       <!-- Radio Select for profileCloudUrl -->
 

src/renderer/main/panels/profileCloud/ProfileCloud.svelte

@@ -123,7 +123,7 @@
   }
 
   async function handleLoginToProfileCloud(event) {
-    modal.show(UserLogin);
+    modal.show({ component: UserLogin });
   }
 
   async function handleCreateCloudConfigLink(event) {
@@ -282,6 +282,15 @@
     logger.set(logData);
   }
 
+  async function handleOpenExternalLink(event) {
+    const { link } = event.data;
+    if (window.ctxProcess.buildVariables().BUILD_TARGET === "web") {
+      window.open(link);
+    } else {
+      window.electron.openInBrowser(link);
+    }
+  }
+
   function initChannelCommunication(event) {
     if (event.ports && event.ports.length) {
       switch (event.data) {
@@ -315,6 +324,9 @@
         case "sendLogMessage":
           channelMessageWrapper(event, handleSendLogMessage);
           break;
+        case "openExternalLink":
+          channelMessageWrapper(event, handleOpenExternalLink);
+          break;
       }
     }
   }