From 3f98e31d46c8b2a9b34d291aa47eec05a901695c Mon Sep 17 00:00:00 2001
From: sukuwc <suku@intech.studio>
Date: Thu, 3 Feb 2022 12:07:21 +0100
Subject: [PATCH] SUKU Stop Animation block added

---
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 .../config-blocks/LedAnimationStart.svelte    |   2 +-
 src/app/config-blocks/LedAnimationStop.svelte | 218 ++++++++++++++++++
 4 files changed, 222 insertions(+), 4 deletions(-)
 create mode 100644 src/app/config-blocks/LedAnimationStop.svelte

diff --git a/package-lock.json b/package-lock.json
index e33ee9c9b..24e4de9f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "grid_editor",
-  "version": "1.2.14",
+  "version": "1.2.15",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "grid_editor",
-      "version": "1.2.14",
+      "version": "1.2.15",
       "hasInstallScript": true,
       "dependencies": {
         "@codemirror/basic-setup": "^0.18.0",
diff --git a/package.json b/package.json
index c81ae7089..a3bcdbe71 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "grid_editor",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "main": "./src/electron.js",
   "repository": {
     "type": "git",
diff --git a/src/app/config-blocks/LedAnimationStart.svelte b/src/app/config-blocks/LedAnimationStart.svelte
index a0fecacd0..2ce4763cf 100644
--- a/src/app/config-blocks/LedAnimationStart.svelte
+++ b/src/app/config-blocks/LedAnimationStart.svelte
@@ -5,7 +5,7 @@
     name: 'LedAnimationStart',
     rendering: 'standard',
     category: 'led',
-    desc: 'Animation Start',
+    desc: 'Start Animation',
     color: '#726E60',
     defaultLua: 'glpfs(num,1,val,1,1)',
     icon: `
diff --git a/src/app/config-blocks/LedAnimationStop.svelte b/src/app/config-blocks/LedAnimationStop.svelte
new file mode 100644
index 000000000..628f97b51
--- /dev/null
+++ b/src/app/config-blocks/LedAnimationStop.svelte
@@ -0,0 +1,218 @@
+<script context="module">
+  // config descriptor parameters
+  export const information = {
+    short: 'glap',
+    name: 'LedAnimationStop',
+    rendering: 'standard',
+    category: 'led',
+    desc: 'Stop Animation',
+    color: '#726E60',
+    defaultLua: 'glpfs(num,1,0,0,0)',
+    icon: `
+    <svg width="100%" height="100%" viewBox="0 0 303 303" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M204.8 97.6C191.2 84 172 75.2 151.2 75.2C130.4 75.2 111.2 83.6 97.6 97.6C84 111.2 75.2 130.4 75.2 151.2C75.2 172 84 191.2 97.6 204.8C111.2 218.4 130.4 227.2 151.2 227.2C172 227.2 191.2 218.8 204.8 204.8C218.4 191.2 227.2 172 227.2 151.2C227.2 130.4 218.8 111.2 204.8 97.6ZM190.4 190.4C180.4 200.4 166.4 206.4 151.2 206.4C136 206.4 122 200.4 112 190.4C102 180.4 96 166.4 96 151.2C96 136 102 122 112 112C122 102 136 96 151.2 96C166.4 96 180.4 102 190.4 112C200.4 122 206.4 136 206.4 151.2C206.4 166.4 200.4 180.4 190.4 190.4Z" fill="black"/>
+      <path d="M292 140.8H261.2C255.6 140.8 250.8 145.6 250.8 151.2C250.8 156.8 255.6 161.6 261.2 161.6H292C297.6 161.6 302.4 156.8 302.4 151.2C302.4 145.6 297.6 140.8 292 140.8Z" fill="black"/>
+      <path d="M151.2 250.8C145.6 250.8 140.8 255.6 140.8 261.2V292C140.8 297.6 145.6 302.4 151.2 302.4C156.8 302.4 161.6 297.6 161.6 292V261.2C161.6 255.6 156.8 250.8 151.2 250.8Z" fill="black"/>
+      <path d="M258 243.6L236 221.6C232.4 217.6 225.6 217.6 221.6 221.6C217.6 225.6 217.6 232 221.6 236L243.6 258C247.6 262 254 262 258 258C262 254 262 247.6 258 243.6Z" fill="black"/>
+      <path d="M151.2 0C145.6 0 140.8 4.8 140.8 10.4V41.2C140.8 46.8 145.6 51.6 151.2 51.6C156.8 51.6 161.6 46.8 161.6 41.2V10.4C161.6 4.8 156.8 0 151.2 0Z" fill="black"/>
+      <path d="M258.4 44.4C254.4 40.4 248 40.4 244 44.4L222 66.4C218 70.4 218 76.8 222 80.8C225.6 84.8 232.4 84.8 236.4 80.8L258.4 58.8C262.4 54.8 262.4 48.4 258.4 44.4Z" fill="black"/>
+      <path d="M41.2 140.8H10.4C4.8 140.8 0 145.6 0 151.2C0 156.8 4.4 161.6 10.4 161.6H41.2C46.8 161.6 51.6 156.8 51.6 151.2C51.6 145.6 46.8 140.8 41.2 140.8Z" fill="black"/>
+      <path d="M80.4 221.6C76.8 217.6 70 217.6 66 221.6L44 243.6C40 247.6 40 254 44 258C48 262 54.4 262 58.4 258L80.4 236C84.4 232 84.4 225.6 80.4 221.6Z" fill="black"/>
+      <path d="M80.4 66.4L58.4 44.4C54.4 40.4 48 40.4 44 44.4C40 48.4 40 54.8 44 58.8L66 80.8C70 84.8 76.4 84.8 80.4 80.8C84.4 76.8 84.4 70.4 80.4 66.4Z" fill="black"/>
+    </svg>
+    `
+  }
+</script>
+
+<script>
+  import {onMount, createEventDispatcher, onDestroy} from 'svelte';
+  import AtomicInput from '../main/user-interface/AtomicInput.svelte';
+
+  import _utils from '../runtime/_utils.js';
+  import { localDefinitions } from '../runtime/runtime.store';
+
+  import validate from './_validators';
+  import AtomicSuggestions from '../main/user-interface/AtomicSuggestions.svelte';
+
+  export let config;
+  export let humanScript;
+  export let inputSet;
+  export let blockAddedOnClick;
+  export let index;
+
+  let loaded = false;
+
+  const dispatch = createEventDispatcher();
+
+  const parameterNames = ['LED Number', 'Layer', 'Phase', 'Rate', 'Shape'];
+
+  let scriptSegments = [];
+
+  // config.script cannot be undefined
+  $: if(config.script && !loaded){
+    scriptSegments = _utils.scriptToSegments({short: "glpfs", script: config.script});
+    loaded = true;
+  };
+
+  let suggestionPlaceMove = false;
+
+  onDestroy(()=>{
+    loaded = false;
+  })
+
+  function sendData(e, index){
+
+    let valid = 0;
+    
+    const validator = new validate.check(e);
+
+    const locals = $localDefinitions.map(l => l.value)
+    
+    if(index == 0){
+      valid = validator.min(0).max(15).result();
+    }
+
+    if(index == 1){
+      valid = validator.min(1).max(2).result();
+    }
+
+    if(index == 2){
+      valid = validator.min(0).max(255).result();
+    }
+    
+    if(index == 3){
+      valid = validator.min(-255).max(255).result();
+    }
+
+    if(index == 4){
+      valid = validator.min(0).max(3).result();
+    }
+
+    if(valid){
+      scriptSegments[index] = e;
+      // important to set the function name = human readable for now
+      const script = _utils.segmentsToScript({human: config.human, short: "glpfs", array: scriptSegments}); 
+      dispatch('output', {short: config.short, script: script})
+    }
+  }
+
+  const _suggestions = [
+    // led number
+      [
+        //{value: 'this.ind()', info: 'this led'},
+      ],
+    // layer
+      [
+        {value: '1', info: 'layer 1'},
+        {value: '2', info: 'layer 2'}
+      ],
+    // phase
+      [
+        //{value: 'to do...', info: 'to do...'}
+      ],
+    // frequency
+      [
+        {value: '1', info: '1 (slow)'},
+        {value: '2', info: '2'},
+        {value: '3', info: '3'},
+        {value: '4', info: '4 (fast)'}
+      ],
+    // shape
+      [
+        {value: '0', info: 'Saw Up'},
+        {value: '1', info: 'Saw Down'},
+        {value: '2', info: 'Square'},
+        {value: '3', info: 'Sine'}
+      ]
+  ];
+
+  let suggestions = [];
+
+  $: if($localDefinitions){
+    suggestions = _suggestions.map((s,i) => {
+
+
+      return [...s, ...$localDefinitions]
+
+    });
+    suggestions = suggestions;
+  }
+
+  onMount(()=>{
+    suggestions = _suggestions;
+  })
+
+  let showSuggestions = false;
+  let focusedInput = undefined;
+  let focusGroup = [];
+
+  function onActiveFocus(event,index){
+
+    if (index<2){
+      suggestionPlaceMove = true; 
+    }
+    else{
+
+      suggestionPlaceMove = false; 
+    }
+
+    focusGroup[index] = event.detail.focus;
+    focusedInput = index;
+  }
+
+  function onLooseFocus(event,index){
+    focusGroup[index] = event.detail.focus;
+    showSuggestions = focusGroup.includes(true);
+  }
+
+
+</script>
+
+
+<config-led-phase class="flex flex-col w-full p-2">
+
+  <div class="w-full flex flex-col p-2">
+
+    <div class="text-gray-500 text-sm pb-1 font-bold">Stop the periodic animation on the LED</div>
+    
+ </div>
+
+  <div class="w-full flex">
+    {#each [scriptSegments[0], scriptSegments[1]] as script, i}
+      <div class={'w-1/2' + ' atomicInput'}>
+        <div class="text-gray-500 text-sm pb-1">{parameterNames[i]}</div>
+        <AtomicInput 
+          inputValue={script} 
+          suggestions={suggestions[i]} 
+          on:active-focus={(e)=>{onActiveFocus(e,i)}} 
+          on:loose-focus={(e)=>{onLooseFocus(e,i)}} 
+          on:change={(e)=>{sendData(e.detail,i)}}/>
+      </div>
+    {/each}
+  </div>
+
+  {#if showSuggestions  && suggestionPlaceMove==true}
+
+    <AtomicSuggestions 
+      {suggestions} 
+      {focusedInput} 
+      on:select={(e)=>{
+        scriptSegments[e.detail.index] = e.detail.value; 
+        sendData(e.detail.value,e.detail.index)
+      }}
+    />
+
+  {/if}
+
+
+</config-led-phase>
+
+<style>
+  .atomicInput{
+    padding-right:0.5rem;
+  }
+
+  .atomicInput:first-child{
+    padding-left: 0.5rem;
+  }
+</style>
\ No newline at end of file