Follow layer mode

src/renderer/component/Icon/IconMagnifier.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+
+function IconMagnifier(props) {
+  return (
+
+    <svg fill="#ffffff" width={24} height={24} viewBox="0 0 32 32"  {...props} version="1.1" xmlns="http://www.w3.org/2000/svg">
+        <path d="M31.707 30.282l-9.717-9.776c1.811-2.169 2.902-4.96 2.902-8.007 0-6.904-5.596-12.5-12.5-12.5s-12.5 5.596-12.5 12.5 5.596 12.5 12.5 12.5c3.136 0 6.002-1.158 8.197-3.067l9.703 9.764c0.39 0.39 1.024 0.39 1.415 0s0.39-1.023 0-1.415zM12.393 23.016c-5.808 0-10.517-4.709-10.517-10.517s4.708-10.517 10.517-10.517c5.808 0 10.516 4.708 10.516 10.517s-4.709 10.517-10.517 10.517z"></path>
+    </svg>
+  );
+}
+
+export default IconMagnifier;

src/renderer/component/Select/LayerSelector.js

@@ -29,14 +29,15 @@ import {
   IconArrowDownWithLine,
   IconFileDownload,
   IconKeyboard,
-  IconFlashlight,
+  IconFlashlight, IconRecord, IconStopWatch, IconLayers,
 } from "../Icon";
 
 import { NameModal } from "../Modal"; // Imported custom modal component
 import { ButtonSettings } from "../Button";
 import { KeyboardViewSelector } from "../ToggleButtons";
+import IconMagnifier from "@Renderer/component/Icon/IconMagnifier";
 
-const Style = Styled.div` 
+const Style = Styled.div`
 display: flex;
 align-items: center;
 .dropdownMultipleActions {
@@ -129,6 +130,8 @@ class LayerSelector extends React.Component {
       clearFunc,
       editModeActual,
       editModeFunc,
+      editFollowMode,
+      followModeActual,
       exportToPdf,
     } = this.props;
     const { show, showAdd } = this.state;
@@ -146,6 +149,20 @@ class LayerSelector extends React.Component {
         icon: <IconFlashlight />,
       },
     ];
+    const followMode = [
+      {
+        name: i18n.editor.follow.stop,
+        tooltip: i18n.editor.follow.stopFollow,
+        value: "off",
+        icon: <IconLayers />,
+      },
+      {
+        name: i18n.editor.follow.layer,
+        tooltip: i18n.editor.follow.followLayer,
+        value: "on",
+        icon: <IconMagnifier />,
+      },
+    ];
     return (
       <Style>
         <div className="itemListelector dropdownMultipleActions">
@@ -240,6 +257,7 @@ class LayerSelector extends React.Component {
           </div>
         </div>
         <KeyboardViewSelector listElements={layoutsMode} value={editModeActual} style="flex" editModeFunc={editModeFunc} />
+        <KeyboardViewSelector listElements={followMode} value={followModeActual} style="flex" editModeFunc={editFollowMode} />
 
         {itemList == undefined || itemList.length == 0 || itemList.length <= selectedItem ? (
           ""

src/renderer/i18n/en.js

@@ -112,6 +112,12 @@ const English = {
       exportToPdf: "Export layouts to pdf",
       layerToCopy: "You will copy the layout of this layer",
     },
+    follow:{
+      layer: "Start",
+      stop: "Stop",
+      followLayer: "Show active layer",
+      stopFollow: "Don't show active layer",
+    },
     color: {
       color: "Color",
       colorEditor: "Color Editor",

src/renderer/views/LayoutEditor.js

@@ -50,6 +50,7 @@ import Backup from "../../api/backup";
 import i18n from "../i18n";
 
 import Store from "../utils/Store";
+import focus from "../../api/focus";
 
 const store = Store.getStore();
 
@@ -465,6 +466,9 @@ class LayoutEditor extends React.Component {
       showStandardView: false,
       layoutSelectorPosition: { x: 0, y: 0 },
       isWireless: false,
+      followLayerId:null,
+      followInterval: 1000,
+      followMode: "off"
     };
     this.onLayerNameChange = this.onLayerNameChange.bind(this);
     this.updateMacros = this.updateMacros.bind(this);
@@ -480,6 +484,7 @@ class LayoutEditor extends React.Component {
     this.CloneExistingNeuron = this.CloneExistingNeuron.bind(this);
     this.updateOldMacros = this.updateOldMacros.bind(this);
     this.onToggle = this.onToggle.bind(this);
+    this.onFollowModeToggle = this.onFollowModeToggle.bind(this)
   }
 
   keymapDB = new KeymapDB();
@@ -1685,6 +1690,46 @@ class LayoutEditor extends React.Component {
     return this.state.layerNames.length > index ? this.state.layerNames[index].name : this.defaultLayerNames[index];
   }
 
+ async onFollowModeToggle  (data){
+    if(data==="on"){
+        const ref = setInterval(this.selectCurrentLayer, this.state.followInterval)
+        this.setState({
+          followLayerId: ref,
+          followMode: "on"
+        })
+    }else{
+      const ref = this.state.followLayerId;
+      if(ref){
+        clearInterval(ref);
+      }
+      this.setState({
+        followLayerId: null,
+        followMode: "off"
+      })
+    }
+  }
+
+  selectCurrentLayer = async () => {
+    const focus = new Focus();
+    let layerState = await focus.command("layer.state");
+    const splitted = layerState.split(" ");
+    const rev = splitted.reverse()
+
+    const length = rev.length;
+    let found = -1;
+
+    for (let i = 0; i < length; i++) {
+      const layer = rev[i];
+      if (layer === "1") {
+        found = i;
+        break;
+      }
+    }
+    const realLayer = length - found - 1
+    this.selectLayer(realLayer)
+  }
+
+
   modeSelectToggle = data => {
     if (this.state.isStandardView) {
       if (this.state.currentLedIndex > this.state.ledIndexStart) {
@@ -1949,6 +1994,8 @@ class LayoutEditor extends React.Component {
                 copyFunc={this.copyFromDialog}
                 editModeActual={this.state.modeselect}
                 editModeFunc={this.modeSelectToggle}
+                editFollowMode={this.onFollowModeToggle}
+                followModeActual={this.state.followMode}
                 exportToPdf={this.exportToPdf}
               />
             }