🚩 PR: Added new Button Step action block

package.json

@@ -57,6 +57,7 @@
     "monaco-editor": "^0.34.0",
     "node-disk-info": "^1.3.0",
     "node-fetch": "^2.6.7",
+    "number-to-words": "^1.2.4",
     "panzoom": "^9.3.0",
     "polka": "^0.5.2",
     "semver": "^7.5.4",

src/renderer/config-blocks/ButtonStep_ElseIf.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" context="module">
+  import {
+    type ActionBlockInformation,
+    SyntaxPreprocessor,
+  } from "./ActionBlockInformation";
+  // Component for the untoggled "header" of the component
+  import ButtonStepFace from "./headers/ButtonStepFace.svelte";
+  export const header = ButtonStepFace;
+
+  const icon = `<svg width="100%" height="100%" id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="2 2 28 28"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <defs> <style> .cls-1 { fill: none; } </style> </defs> <rect x="10.3431" y="10.3431" width="11.3137" height="11.3137" transform="translate(-6.6274 16) rotate(-45)"></rect> <path d="M16,30a2.0763,2.0763,0,0,1-1.4732-.6094L2.6094,17.4732a2.0855,2.0855,0,0,1,0-2.9464L14.5268,2.6094a2.0855,2.0855,0,0,1,2.9464,0L29.3906,14.5268a2.0855,2.0855,0,0,1,0,2.9464L17.4732,29.3906A2.0763,2.0763,0,0,1,16,30ZM16,3.9992a.0841.0841,0,0,0-.0591.0244L4.0236,15.9409a.0838.0838,0,0,0,0,.1182L15.9409,27.9764a.0842.0842,0,0,0,.1182,0L27.9764,16.0591a.0838.0838,0,0,0,0-.1182L16.0591,4.0236A.0841.0841,0,0,0,16,3.9992Z"></path> <rect id="_Transparent_Rectangle_" data-name=" Transparent Rectangle " class="cls-1" width="32" height="32"></rect> </g></svg>`;
+  // config descriptor parameters
+  export const information: ActionBlockInformation = {
+    short: "bstn",
+    name: "ButtonStep_ElseIf",
+    rendering: "modifier",
+    category: "special",
+    displayName: undefined, //Is generated on the face
+    defaultLua: "elseif is_step(self, N) then",
+    icon: icon,
+    blockIcon: icon,
+    color: "#4A4AA7",
+    selectable: true,
+    movable: false,
+    hideIcon: false,
+    type: "composite_part",
+    toggleable: false,
+    menuName: "Additional Step",
+    syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText:
+      "Actions here are triggered when the event runs, and button step above is active.",
+  };
+</script>

src/renderer/config-blocks/ButtonStep_End.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" context="module">
+  import {
+    type ActionBlockInformation,
+    SyntaxPreprocessor,
+  } from "./ActionBlockInformation";
+  // Component for the untoggled "header" of the component
+  import ButtonStepFace from "./headers/ButtonStepFace.svelte";
+  export const header = ButtonStepFace;
+
+  // config descriptor parameters
+  export const information: ActionBlockInformation = {
+    short: "bste",
+    name: "ButtonStep_End",
+    rendering: "modifier",
+    category: null,
+    displayName: "",
+    rounding: "bottom",
+    defaultLua: "end",
+    icon: undefined,
+    blockIcon: undefined,
+    color: "#4A4AA7",
+    selectable: false,
+    movable: false,
+    hideIcon: true,
+    type: "composite_close",
+    toggleable: false,
+    syntaxPreprocessor: new SyntaxPreprocessor(""),
+  };
+</script>
+
+<else-block
+  class="{$$props.class} w-full h-fit flex flex-col text-white py-1 pointer-events-auto"
+  style="min-height: 2.5rem; background: {information.color};"
+/>

src/renderer/config-blocks/ButtonStep_If.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" context="module">
+  import {
+    type ActionBlockInformation,
+    SyntaxPreprocessor,
+  } from "./ActionBlockInformation";
+  // Component for the untoggled "header" of the component
+  import ButtonStepFace from "./headers/ButtonStepFace.svelte";
+  import * as ButtonStepElseIf from "./ButtonStep_ElseIf.svelte";
+  import * as ButtonStepEnd from "./ButtonStep_End.svelte";
+  export const header = ButtonStepFace;
+
+  const icon = `<svg width="100%" height="100%" version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="45.21 0 167.41 257.83"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M62.288,89.305c1.367,0,2.741-0.465,3.867-1.415c2.532-2.138,2.853-5.924,0.715-8.455 C60.642,72.058,57.213,62.67,57.213,53c0-22.608,18.393-41,41-41s41,18.392,41,41c0,6.308-1.392,12.354-4.137,17.974 c-1.455,2.978-0.221,6.57,2.757,8.024c2.977,1.459,6.57,0.22,8.024-2.757c3.554-7.274,5.355-15.093,5.355-23.241 c0-29.225-23.775-53-53-53s-53,23.775-53,53c0,12.5,4.435,24.637,12.487,34.175C58.887,88.581,60.582,89.305,62.288,89.305z"></path> <path d="M211.134,141.765c-3.866-22.86-20.326-25.967-27.416-26.223c-2.007-0.073-3.836-1.129-4.912-2.824 c-5.367-8.456-12.645-10.681-18.813-10.681c-2.824-0.001-5.414,0.465-7.485,1.013c-0.608,0.16-1.227,0.239-1.839,0.239 c-2.178,0-4.277-0.994-5.588-2.811c-5.28-7.315-12.171-9.293-18.078-9.293c-1.58,0-3.09,0.142-4.479,0.36 c-0.371,0.059-0.739,0.087-1.1,0.087c-3.78,0-6.969-3.07-6.974-6.987l-0.05-42.287c-0.014-10.927-8.209-16.387-16.404-16.387 c-8.211,0-16.422,5.479-16.408,16.427c0.022,18.357,0.089,73.493,0.108,90.106c0.004,2.808-1.675,5.345-4.265,6.428 c-32.541,13.602,7.643,74.619,14.84,85.076c0.702,1.02,1.118,2.203,1.211,3.438l1.759,23.661c0.274,3.65,3.316,6.724,6.977,6.724 c0.003,0,0.006,0,0.009,0l78.623-0.349c3.509-0.005,6.471-2.732,6.928-6.211l3.202-24.453c0.136-1.031,0.51-2.053,1.074-2.927 C213.066,191.413,214.717,162.954,211.134,141.765z"></path> </g> </g></svg>`;
+
+  // config descriptor parameters
+  export const information: ActionBlockInformation = {
+    short: "bst0",
+    name: "ButtonStep_If",
+    menuName: "Button Step",
+    rendering: "modifier",
+    rounding: "top",
+    category: "special",
+    displayName: "Button Off",
+    defaultLua: "if is_step(self,0) then",
+    compositeLua: [
+      {
+        short: ButtonStepElseIf.information.short,
+        script: ButtonStepElseIf.information.defaultLua,
+      },
+      {
+        short: ButtonStepEnd.information.short,
+        script: ButtonStepEnd.information.defaultLua,
+      },
+    ],
+    icon: icon,
+    blockIcon: icon,
+    color: "#4A4AA7 ",
+    selectable: true,
+    movable: true,
+    hideIcon: false,
+    type: "composite_open",
+    toggleable: false,
+    syntaxPreprocessor: new SyntaxPreprocessor(""),
+    helperText:
+      "Actions here are triggered when the event runs, and button is in it's off step.",
+  };
+</script>

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { ConfigObject } from "../../main/panels/configuration/Configuration.store";
+  import { createEventDispatcher } from "svelte";
+  import { toWords } from "number-to-words";
+
+  const dispatch = createEventDispatcher();
+
+  export let access_tree;
+  export let config: ConfigObject;
+  export let index;
+
+  function handleClick(e) {
+    dispatch("toggle");
+  }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="px-2 w-full h-full {config.information.rounding === 'top'
+    ? 'rounded-tr-xl'
+    : ''} {config.information.rounding === 'bottom'
+    ? 'rounded-br-xl'
+    : ''} text-white flex items-center"
+  style="background-color:{config.information.color}"
+  on:click={handleClick}
+>
+  {#if config.information.short === "bstn"}
+    <span
+      >{`Step ${
+        toWords(config.step)[0].toUpperCase() +
+        toWords(config.step).slice(1).toLowerCase()
+      }`}</span
+    >
+  {:else}
+    <span>{config.information.displayName}</span>
+  {/if}
+</div>

src/renderer/main/panels/configuration/Configuration.store.js

@@ -14,6 +14,7 @@ import {
 
 import { grid, GridScript } from "@intechstudio/grid-protocol";
 import { v4 as uuidv4 } from "uuid";
+import * as ButtonStepElseIf from "../../../config-blocks/ButtonStep_ElseIf.svelte";
 
 export let lastOpenedActionblocks = writable([]);
 
@@ -51,6 +52,7 @@ export class ConfigObject {
 
     this.information = res.information;
     this.indentation = 0;
+    this.step = 0;
     this.header = res.header;
     this.component = res.component;
     this.selected = false;
@@ -116,6 +118,28 @@ export class ConfigList extends Array {
     return copy;
   }
 
+  static updateStep(list) {
+    let stack = [];
+    for (const config of list) {
+      if (config.short === "bst0") {
+        stack.push(0);
+      }
+
+      if (config.short === "bste") {
+        stack.pop();
+      }
+
+      if (config.short === "bstn") {
+        const step = ++stack[stack.length - 1];
+        config.step = step;
+        config.script = ButtonStepElseIf.information.defaultLua.replace(
+          "N",
+          step
+        );
+      }
+    }
+  }
+
   static updateIndentation(list) {
     let indentation = 0;
     for (let i = 0; i < list.length; i++) {
@@ -488,6 +512,7 @@ function create_configuration_manager() {
 
   function handleDataChange(list) {
     ConfigList.updateIndentation(list);
+    ConfigList.updateStep(list);
   }
 
   function updateOverride(func) {

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

@@ -473,7 +473,7 @@
                   </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}
+                      {#if ["composite_close", "single"].includes(config.information.type) || ["single"].includes($configManager[index + 1]?.information.type) || !$appSettings.persistent.actionHelperText || typeof config.information.helperText === "undefined"}
                         <AddActionLine
                           index={index + 1}
                           on:paste={handlePaste}

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

@@ -160,6 +160,25 @@
 
     comp = comp.filter((e) => !filterOut.includes(e.information.short));
 
+    //Filter out not allowed button step conditions
+    let n = index - 1;
+    let indentation = 0;
+    while (n >= 0) {
+      const short = configs[n].short;
+      if (short === "bst0") {
+        ++indentation;
+      } else if (short === "btste") {
+        --indentation;
+      }
+      --n;
+    }
+
+    if (indentation == 0) {
+      comp = comp.filter((e) => e.information.short !== "bstn");
+    } else {
+      comp = comp.filter((e) => e.information.short !== "bst0");
+    }
+
     //Filter out element type specific components
     const eventString = NumberToEventType(target.eventType);
 
@@ -247,7 +266,6 @@
   }
 
   function handleClose(e) {
-    console.log("close");
     dispatch("close");
   }
 

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

@@ -59,6 +59,7 @@
 
   function handleOutput(e) {
     const { short, script } = e.detail;
+    console.log(short, script);
     dispatch("update", {
       index: index,
       config: new ConfigObject({
@@ -178,6 +179,7 @@
             this={config.header}
             {config}
             {access_tree}
+            {index}
             class="bg-secondary px-2 w-full h-full {config.information
               .rounding === 'top'
               ? 'rounded-tr-xl'