Merge pull request #758 from intechstudio/feat/ActionHelper

🚩 PR: Added action helpers
intechstudio · Jul 8, 2024 · 1213637 · 1213637
2 parents bcdf592 + 1bd1513
commit 1213637
Show file tree

Hide file tree

Showing 24 changed files with 234 additions and 143 deletions.
diff --git a/README.md b/README.md
@@ -17,5 +17,3 @@ npm run format
 npm i
 npm run web-dev
 ```
-
-© Intech Studio Ltd.
diff --git a/src/renderer/config-blocks/ActionBlockInformation.ts b/src/renderer/config-blocks/ActionBlockInformation.ts
@@ -46,4 +46,5 @@ interface Information {
   rounding?: "top" | "bottom";
   compositeLua?: LuaScript[];
   syntaxPreprocessor?: SyntaxPreprocessor;
+  helperText?: string;
 }
diff --git a/src/renderer/config-blocks/ButtonPressRelease_Else.svelte b/src/renderer/config-blocks/ButtonPressRelease_Else.svelte
@@ -100,6 +100,7 @@
     type: "composite_part",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText: "Actions here are triggered when the button is released.",
   };
 </script>
 

diff --git a/src/renderer/config-blocks/ButtonPressRelease_If.svelte b/src/renderer/config-blocks/ButtonPressRelease_If.svelte
@@ -102,6 +102,7 @@
     type: "composite_open",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText: "Actions here are triggered when the button is pressed.",
   };
 </script>
 

diff --git a/src/renderer/config-blocks/Condition_Else.svelte b/src/renderer/config-blocks/Condition_Else.svelte
@@ -28,6 +28,8 @@
     type: "composite_part",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText:
+      "Actions here are triggered when the event runs, and no others conditions were met.",
   };
 </script>
 

diff --git a/src/renderer/config-blocks/Condition_ElseIf.svelte b/src/renderer/config-blocks/Condition_ElseIf.svelte
@@ -28,5 +28,7 @@
     type: "composite_part",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor("$SCRIPT$ end"),
+    helperText:
+      "Actions here are triggered when the event runs, the expression above is true, and none of the others before were.",
   };
 </script>
diff --git a/src/renderer/config-blocks/Condition_If.svelte b/src/renderer/config-blocks/Condition_If.svelte
@@ -30,5 +30,7 @@
     type: "composite_open",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor("$SCRIPT$ end"),
+    helperText:
+      "Actions here are triggered when the event runs, and the expression above is true.",
   };
 </script>
diff --git a/src/renderer/config-blocks/EncoderLeftRight_Else.svelte b/src/renderer/config-blocks/EncoderLeftRight_Else.svelte
@@ -48,6 +48,8 @@
     type: "composite_part",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText:
+      "Actions here are triggered when the encoder was rotated right.",
   };
 </script>
 

diff --git a/src/renderer/config-blocks/EncoderLeftRight_If.svelte b/src/renderer/config-blocks/EncoderLeftRight_If.svelte
@@ -58,6 +58,7 @@
     type: "composite_open",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText: "Actions here are triggered when the encoder was rotated left.",
   };
 </script>
 

diff --git a/src/renderer/config-blocks/EncoderPushRotLeftRight_Else.svelte b/src/renderer/config-blocks/EncoderPushRotLeftRight_Else.svelte
@@ -34,5 +34,6 @@
     type: "composite_part",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText: "Actions here are triggered when the encoder is rotated right.",
   };
 </script>
diff --git a/src/renderer/config-blocks/EncoderPushRotLeftRight_ElseIf1.svelte b/src/renderer/config-blocks/EncoderPushRotLeftRight_ElseIf1.svelte
@@ -30,5 +30,7 @@
     type: "composite_part",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText:
+      "Actions here are triggered by rotating the encoder right while it is pressed.",
   };
 </script>
diff --git a/src/renderer/config-blocks/EncoderPushRotLeftRight_ElseIf2.svelte b/src/renderer/config-blocks/EncoderPushRotLeftRight_ElseIf2.svelte
@@ -31,5 +31,6 @@
     type: "composite_part",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText: "Actions here are triggered when the encoder is rotated left.",
   };
 </script>
diff --git a/src/renderer/config-blocks/EncoderPushRotLeftRight_If.svelte b/src/renderer/config-blocks/EncoderPushRotLeftRight_If.svelte
@@ -48,5 +48,7 @@
     type: "composite_open",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText:
+      "Actions here are triggered by rotating the encoder left while it is pressed.",
   };
 </script>
diff --git a/src/renderer/config-blocks/EncoderPushRot_Else.svelte b/src/renderer/config-blocks/EncoderPushRot_Else.svelte
@@ -32,6 +32,7 @@
     type: "composite_part",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText: "Actions here are triggered when the encoder is rotated.",
   };
 </script>
 

diff --git a/src/renderer/config-blocks/EncoderPushRot_If.svelte b/src/renderer/config-blocks/EncoderPushRot_If.svelte
@@ -40,6 +40,8 @@
     type: "composite_open",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText:
+      "Actions here are triggered by rotating the encoder while it is pressed.",
   };
 </script>
 

diff --git a/src/renderer/config-blocks/For_Loop.svelte b/src/renderer/config-blocks/For_Loop.svelte
@@ -26,5 +26,6 @@
     type: "composite_open",
     toggleable: false,
     syntaxPreprocessor: new SyntaxPreprocessor("$SCRIPT$ end"),
+    helperText: "Actions here are triggered each time the loop runs.",
   };
 </script>
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -1,11 +1,13 @@
 <script>
+  import { appSettings } from "./../../../runtime/app-helper.store.js";
   import { get } from "svelte/store";
   import ElementSelectionPanel from "./ElementSelectionPanel.svelte";
 
   import { Analytics } from "../../../runtime/analytics.js";
 
   import { fly, fade } from "svelte/transition";
   import { flip } from "svelte/animate";
+  import * as eases from "svelte/easing";
 
   import EventPanel from "./EventPanel.svelte";
 
@@ -37,6 +39,7 @@
     config_drag,
     DragEvent,
   } from "../../_actions/move.action.js";
+  import AddActionLine from "./components/AddActionLine.svelte";
   import AddAction from "./components/AddAction.svelte";
   import AddActionButton from "./components/AddActionButton.svelte";
   import { NumberToEventType } from "grid-protocol";
@@ -54,6 +57,7 @@
     copyElement,
     clearElement,
   } from "./configuration-actions";
+  import TooltipQuestion from "../../user-interface/tooltip/TooltipQuestion.svelte";
 
   //////////////////////////////////////////////////////////////////////////////
   /////     VARIABLES, LIFECYCLE FUNCTIONS AND TYPE DEFINITIONS       //////////
@@ -398,100 +402,122 @@
           on:drag-end={handleDragEnd}
           class="flex flex-col h-full relative justify-between"
         >
-          <config-list
-            id="cfg-list"
-            style="height:{scrollHeight}"
-            use:configListScrollSize={$configManager}
-            on:height={(e) => {
-              scrollHeight = e.detail;
-            }}
-            on:mousemove={handleDrag}
-            on:mouseleave={() => {
-              clearInterval(autoScroll);
-            }}
-            class="flex flex-col w-full h-auto overflow-y-auto"
-          >
-            {#each $configManager as config, index (config.id)}
-              <anim-block
-                animate:flip={{ duration: 300 }}
-                in:fade|global={{ delay: 0 }}
-              >
-                {#key index}
-                  {#if typeof $config_drag === "undefined"}
-                    <AddAction
-                      {index}
-                      on:paste={handlePaste}
-                      on:new-config={handleConfigInsertion}
-                    />
-                  {:else}
-                    <DropZone
-                      {index}
-                      thresholdTop={10}
-                      thresholdBottom={10}
-                      class=""
-                      drag_target={draggedIndexes}
-                      on:drop-target-change={handleDropTargetChange}
-                    />
-                  {/if}
-                {/key}
-                <div class="flex flex-row justify-between relative">
-                  <div
-                    class="w-full bg-white absolute h-full opacity-10 pointer-events-none z-10"
-                    class:hidden={!config.selected}
-                  />
-
-                  <DynamicWrapper
-                    {index}
-                    {config}
-                    {access_tree}
-                    on:update={handleConfigUpdate}
-                    on:replace={handleReplace}
-                    on:select={() => {
-                      handleSelectActionBlock(index);
-                    }}
-                  />
-
-                  <div class="z-20 flex items-center mx-2">
-                    <Options
-                      {index}
-                      bind:selected={config.selected}
-                      disabled={!config.information.selectable}
-                      on:selection-change={handleSelectionChange}
-                    />
-                  </div>
-                </div></anim-block
-              >
-            {/each}
-            {#key $configManager.length}
+          {#if $configManager.length === 0 && $runtime.length > 0}
+            <div class="mt-2">
+              <AddAction
+                index={0}
+                text={"There are no actions configured on this event."}
+                on:paste={handlePaste}
+                on:new-config={handleConfigInsertion}
+              />
+            </div>
+          {:else}
+            <config-list
+              id="cfg-list"
+              style="height:{scrollHeight}"
+              use:configListScrollSize={$configManager}
+              on:height={(e) => {
+                scrollHeight = e.detail;
+              }}
+              on:mousemove={handleDrag}
+              on:mouseleave={() => {
+                clearInterval(autoScroll);
+              }}
+              class="flex flex-col w-full h-auto overflow-y-auto justify-start"
+            >
               {#if typeof $config_drag === "undefined"}
-                <AddAction
-                  index={$configManager.length}
+                <AddActionLine
+                  index={0}
                   on:paste={handlePaste}
                   on:new-config={handleConfigInsertion}
                 />
               {:else}
                 <DropZone
-                  index={$configManager.length}
+                  index={0}
                   drag_target={draggedIndexes}
                   thresholdTop={10}
                   thresholdBottom={0}
-                  class="h-full"
                   on:drop-target-change={handleDropTargetChange}
                 />
               {/if}
-            {/key}
-          </config-list>
+              {#each $configManager as config, index (config.id)}
+                <anim-block
+                  animate:flip={{ duration: 300, easing: eases.backOut }}
+                  in:fade|global={{ delay: 0 }}
+                >
+                  <div class="flex flex-row justify-between relative">
+                    <div
+                      class="w-full bg-white absolute h-full opacity-10 pointer-events-none z-10"
+                      class:hidden={!config.selected}
+                    />
+
+                    <DynamicWrapper
+                      {index}
+                      {config}
+                      {access_tree}
+                      on:update={handleConfigUpdate}
+                      on:replace={handleReplace}
+                      on:select={() => {
+                        handleSelectActionBlock(index);
+                      }}
+                    />
+
+                    <div class="z-20 flex items-center mx-2">
+                      <Options
+                        {index}
+                        bind:selected={config.selected}
+                        disabled={!config.information.selectable}
+                        on:selection-change={handleSelectionChange}
+                      />
+                    </div>
+                  </div>
+                  {#key index}
+                    {#if typeof $config_drag === "undefined"}
+                      {#if ["composite_close", "single"].includes(config.information.type) || ["single"].includes($configManager[index + 1]?.information.type) || !$appSettings.persistent.actionHelperText}
+                        <AddActionLine
+                          index={index + 1}
+                          on:paste={handlePaste}
+                          on:new-config={handleConfigInsertion}
+                        />
+                      {:else}
+                        <div class="mr-6">
+                          <AddAction
+                            text={config.information.helperText}
+                            index={index + 1}
+                            on:paste={handlePaste}
+                            on:new-config={handleConfigInsertion}
+                          />
+                        </div>
+                      {/if}
+                    {:else}
+                      <DropZone
+                        index={index + 1}
+                        thresholdTop={10}
+                        thresholdBottom={10}
+                        class={index + 1 == $configManager.length
+                          ? "h-full"
+                          : ""}
+                        drag_target={draggedIndexes}
+                        on:drop-target-change={handleDropTargetChange}
+                      />
+                    {/if}
+                  {/key}
+                </anim-block>
+              {/each}
+            </config-list>
+          {/if}
+        </div>
+        <div
+          class="w-full flex justify-between mb-3"
+          class:invisible={$runtime.length === 0}
+        >
+          <AddActionButton
+            index={$configManager.length}
+            on:paste={handlePaste}
+            on:new-config={handleConfigInsertion}
+          />
+          <ExportConfigs />
         </div>
-        {#if $runtime.length > 0}
-          <div class="w-full flex justify-between mb-3">
-            <AddActionButton
-              index={$configManager.length}
-              on:paste={handlePaste}
-              on:new-config={handleConfigInsertion}
-            />
-            <ExportConfigs />
-          </div>
-        {/if}
       </configs>
     </container>
   {/key}

diff --git a/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte b/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte
@@ -107,7 +107,7 @@
       <div class="text-gray-500 text-sm">Element Name</div>
       <TooltipQuestion
         key={"configuration_element_name"}
-        class="ml-2 text-white "
+        class="ml-2 text-white"
       />
     </div>
     <div class="flex flex-row items-center gap-2">
-Original file line number
+Diff line change
@@ Expand Up / @@ -17,5 +17,3 @@ npm run format @@
     npm i
     npm run web-dev
     ```
-    © Intech Studio Ltd.