# \[FEATURE-1245\] Add modifier+click to cycle through components under mouse

**URL:** <https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112>\
**Category:** Ignition\
**Tags:** perspective, vision, ignition80\
**Created:** [December 1, 2020, 11:04pm UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112 "2020-12-01T23:04:19Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 1, 2020, 11:04pm UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112/1 "2020-12-01T23:04:19Z")

</div>

FactoryTalk has the ability to slow-click through components under the mouse and is _super_ handy.

Can this be added into ~~Vision and~~ (turns out this is already a feature in Vision 🙂 Alt+click) Perspective? Except it would be far better if, instead of having to click slowly [long cycle time], have this under a modifier key such as Alt/Option key.

If you haven't used FT, say you have 10 objects all on top of each other, this feature lets you click on them slowly, in order to select the objects beneath each other. It effectively cycles through the objects in z-order.

I'm trying to select the green angled pipe attached to TW20006, but it's somewhere at the bottom of the z-order stack and it's proving difficult...  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/9/2969d42f61db1abad976c51d991866d61ab2a831.png)

Idea here, in case you want to upvote 🙂

> **[Add modifier+click to cycle through components under mouse | Voters |...](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/add-modifierclick-to-cycle-through-components-under-mouse)**

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 1, 2020, 11:28pm UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112/2 "2020-12-01T23:28:14Z")

</div>

Alt-click is actually already supposed to do that, scanning through the code…

EDIT: In Vision, at least.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 1, 2020, 11:30pm UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112/3 "2020-12-01T23:30:37Z")

</div>

Interesting! I haven’t tried it in Vision, using more Perspective these days but i’ll give it a go!  
Would be great to get into Perspective 🙂 (I tried in P and no dice)

Just tried in Vision (8.1.0) and it works, awesome! Thanks

---

<div class="post-metadata">

**Author:** ![jd1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jd1/32/18928_2.png) [@jd1](https://forum.inductiveautomation.com/u/jd1)\
**Post date:** [December 1, 2020, 11:49pm UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112/4 "2020-12-01T23:49:38Z")

</div>

Not to totally hijack this topic, but I am going to a little bit, the screenshot that you posted; is that from a perspective project? If so how are you accomplishing the process lines?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 1, 2020, 11:51pm UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112/5 "2020-12-01T23:51:32Z")

</div>

Yep that’s from Perspective. The pipework is all created from essentially Label components with borders. I went one step further though to add the Label inside of a View I use as a template which has params to add borders to top/bottom/left/right, amongst other things like change the colour based on contents and status.

I am, however, considering swapping this over to using a single SVG with essentially the same thing, four borders made up with 4 straight lines. I haven’t tried it yet though, but what I’ve found with using Labels and borders is that they don’t scale if you’re using a percent mode coord container, therefore, the pipework doesn’t line up when you change resolution of the client… whereas SVG lines will (unless you specifically tell them not to scale)

```auto
{
  "custom": {
    "pipeStyle": "Pipework/Water/Off"
  },
  "params": {
    "bottom": false,
    "flow": false,
    "left": false,
    "pipeContents": "Water",
    "right": false,
    "top": true,
    "width": "5px"
  },
  "propConfig": {
    "custom.pipeStyle": {
      "binding": {
        "config": {
          "expression": "\u0027Pipework/\u0027 + {view.params.pipeContents} + \u0027/\u0027 + \r\nif({view.params.flow}\r\n\t,\u0027On\u0027\r\n\t,\u0027Off\u0027\r\n)"
        },
        "type": "expr"
      },
      "persistent": true
    },
    "params.bottom": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.flow": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.left": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.pipeContents": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.right": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.top": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.width": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 40,
      "width": 60
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "grow": 1
        },
        "propConfig": {
          "props.style.borderBottomStyle": {
            "binding": {
              "config": {
                "expression": "if({view.params.bottom}\r\n\t,\u0027solid\u0027\r\n\t,\u0027none\u0027\r\n)"
              },
              "type": "expr"
            }
          },
          "props.style.borderBottomWidth": {
            "binding": {
              "config": {
                "path": "view.params.width"
              },
              "type": "property"
            }
          },
          "props.style.borderLeftStyle": {
            "binding": {
              "config": {
                "expression": "if({view.params.left}\r\n\t,\u0027solid\u0027\r\n\t,\u0027none\u0027\r\n)"
              },
              "type": "expr"
            }
          },
          "props.style.borderLeftWidth": {
            "binding": {
              "config": {
                "path": "view.params.width"
              },
              "type": "property"
            }
          },
          "props.style.borderRightStyle": {
            "binding": {
              "config": {
                "expression": "if({view.params.right}\r\n\t,\u0027solid\u0027\r\n\t,\u0027none\u0027\r\n)"
              },
              "type": "expr"
            }
          },
          "props.style.borderRightWidth": {
            "binding": {
              "config": {
                "path": "view.params.width"
              },
              "type": "property"
            }
          },
          "props.style.borderTopStyle": {
            "binding": {
              "config": {
                "expression": "if({view.params.top}\r\n\t,\u0027solid\u0027\r\n\t,\u0027none\u0027\r\n)"
              },
              "type": "expr"
            }
          },
          "props.style.borderTopWidth": {
            "binding": {
              "config": {
                "path": "view.params.width"
              },
              "type": "property"
            }
          },
          "props.style.classes": {
            "binding": {
              "config": {
                "expression": "{view.custom.pipeStyle} + \u0027 \u0027 +\r\nif({view.params.left}, \u0027Pipework/LabelBorders/Left \u0027, \u0027\u0027) +\r\nif({view.params.right}, \u0027Pipework/LabelBorders/Right \u0027, \u0027\u0027) + \r\nif({view.params.top}, \u0027Pipework/LabelBorders/Top \u0027, \u0027\u0027) + \r\nif({view.params.bottom}, \u0027Pipework/LabelBorders/Bottom\u0027, \u0027\u0027) "
              },
              "type": "expr"
            }
          }
        },
        "props": {
          "style": {}
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}

```

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 2, 2020, 12:00am UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112/6 "2020-12-02T00:00:44Z")

</div>

It won’t look _quite_ like that, but the piping we’re adding to Perspective soon ™ is going to be very, very nice and make things a lot easier.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [December 2, 2020, 12:05am UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112/7 "2020-12-02T00:05:24Z")

</div>

> [@paul-griffith](#):
>
> It won’t look _quite_ like that

Do you have a screenshot of what it _might_ look like, you know, hypothetically speaking? 🙂 From speaking to Travis, I know they'll have start and end anchor points that will "follow" the objects they're attached to, as well as potentially path anchor points along the line to coerce them to points they should traverse. I assume this will work for any components, not just the smart symbols objects? (personally I don't think i'll use these, as I like to have full control)

The thing we like to laugh about is that, in a few years time, we'll come back to some of these projects we've done in Perspective and think to ourselves "what the hell was I thinking?? why did I use Labels as pipes??" 😆 That's the beauty of evolving products and evolving experience

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [December 2, 2020, 1:06am UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112/8 "2020-12-02T01:06:46Z")

</div>

> [@paul-griffith](#):
>
> ... we’re adding to Perspective soon ™ is ...

Are you using "soon" like "inconceivable" ? I don't think you can trademark that....

[![](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/5/151c68e70bc6b1164f4848d8d25447fb3a2efebd.jpeg "Princess Bride, "You keep using that word. I do not think it means what you think it means."") ](https://www.youtube.com/watch?v=dTRKCXC0JFg)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [December 2, 2020, 4:54pm UTC](https://forum.inductiveautomation.com/t/feature-1245-add-modifier-click-to-cycle-through-components-under-mouse/41112/9 "2020-12-02T16:54:05Z")

</div>

> [@pturmel](#):
>
> Are you using “soon” like “inconceivable” ? I don’t think you can trademark that…

I'm hip and modern, with my slang from...2006: [Urban Dictionary: soon (tm)](https://www.urbandictionary.com/define.php?term=soon%20%28tm%29)

> [@nminchin](#):
>
> Do you have a screenshot of what it _might_ look like, you know, hypothetically speaking?

I don't know much about the implementation details, I just keep seeing the cool screen recordings one of our devs makes as he works on it. And I don't want to land in hot water for sharing something. Suffice it to say, it's pretty cool.