{"action":"created","issue":{"url":"https://api.github.com/repos/phetsims/sun/issues/257","repository_url":"https://api.github.com/repos/phetsims/sun","labels_url":"https://api.github.com/repos/phetsims/sun/issues/257/labels{/name}","comments_url":"https://api.github.com/repos/phetsims/sun/issues/257/comments","events_url":"https://api.github.com/repos/phetsims/sun/issues/257/events","html_url":"https://github.com/phetsims/sun/issues/257","id":174569595,"number":257,"title":"how to add enabled/disabled feature to UI components?","user":{"login":"pixelzoom","id":3046552,"avatar_url":"https://avatars.githubusercontent.com/u/3046552?v=3","gravatar_id":"","url":"https://api.github.com/users/pixelzoom","html_url":"https://github.com/pixelzoom","followers_url":"https://api.github.com/users/pixelzoom/followers","following_url":"https://api.github.com/users/pixelzoom/following{/other_user}","gists_url":"https://api.github.com/users/pixelzoom/gists{/gist_id}","starred_url":"https://api.github.com/users/pixelzoom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pixelzoom/subscriptions","organizations_url":"https://api.github.com/users/pixelzoom/orgs","repos_url":"https://api.github.com/users/pixelzoom/repos","events_url":"https://api.github.com/users/pixelzoom/events{/privacy}","received_events_url":"https://api.github.com/users/pixelzoom/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"jonathanolson","id":480878,"avatar_url":"https://avatars.githubusercontent.com/u/480878?v=3","gravatar_id":"","url":"https://api.github.com/users/jonathanolson","html_url":"https://github.com/jonathanolson","followers_url":"https://api.github.com/users/jonathanolson/followers","following_url":"https://api.github.com/users/jonathanolson/following{/other_user}","gists_url":"https://api.github.com/users/jonathanolson/gists{/gist_id}","starred_url":"https://api.github.com/users/jonathanolson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonathanolson/subscriptions","organizations_url":"https://api.github.com/users/jonathanolson/orgs","repos_url":"https://api.github.com/users/jonathanolson/repos","events_url":"https://api.github.com/users/jonathanolson/events{/privacy}","received_events_url":"https://api.github.com/users/jonathanolson/received_events","type":"User","site_admin":false},"assignees":[{"login":"jonathanolson","id":480878,"avatar_url":"https://avatars.githubusercontent.com/u/480878?v=3","gravatar_id":"","url":"https://api.github.com/users/jonathanolson","html_url":"https://github.com/jonathanolson","followers_url":"https://api.github.com/users/jonathanolson/followers","following_url":"https://api.github.com/users/jonathanolson/following{/other_user}","gists_url":"https://api.github.com/users/jonathanolson/gists{/gist_id}","starred_url":"https://api.github.com/users/jonathanolson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonathanolson/subscriptions","organizations_url":"https://api.github.com/users/jonathanolson/orgs","repos_url":"https://api.github.com/users/jonathanolson/repos","events_url":"https://api.github.com/users/jonathanolson/events{/privacy}","received_events_url":"https://api.github.com/users/jonathanolson/received_events","type":"User","site_admin":false},{"login":"pixelzoom","id":3046552,"avatar_url":"https://avatars.githubusercontent.com/u/3046552?v=3","gravatar_id":"","url":"https://api.github.com/users/pixelzoom","html_url":"https://github.com/pixelzoom","followers_url":"https://api.github.com/users/pixelzoom/followers","following_url":"https://api.github.com/users/pixelzoom/following{/other_user}","gists_url":"https://api.github.com/users/pixelzoom/gists{/gist_id}","starred_url":"https://api.github.com/users/pixelzoom/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pixelzoom/subscriptions","organizations_url":"https://api.github.com/users/pixelzoom/orgs","repos_url":"https://api.github.com/users/pixelzoom/repos","events_url":"https://api.github.com/users/pixelzoom/events{/privacy}","received_events_url":"https://api.github.com/users/pixelzoom/received_events","type":"User","site_admin":false},{"login":"jessegreenberg","id":6396244,"avatar_url":"https://avatars.githubusercontent.com/u/6396244?v=3","gravatar_id":"","url":"https://api.github.com/users/jessegreenberg","html_url":"https://github.com/jessegreenberg","followers_url":"https://api.github.com/users/jessegreenberg/followers","following_url":"https://api.github.com/users/jessegreenberg/following{/other_user}","gists_url":"https://api.github.com/users/jessegreenberg/gists{/gist_id}","starred_url":"https://api.github.com/users/jessegreenberg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jessegreenberg/subscriptions","organizations_url":"https://api.github.com/users/jessegreenberg/orgs","repos_url":"https://api.github.com/users/jessegreenberg/repos","events_url":"https://api.github.com/users/jessegreenberg/events{/privacy}","received_events_url":"https://api.github.com/users/jessegreenberg/received_events","type":"User","site_admin":false}],"milestone":null,"comments":39,"created_at":"2016-09-01T16:33:43Z","updated_at":"2016-09-27T20:10:57Z","closed_at":null,"body":"Developer consensus was to use this pattern for implementing enabled/disabled feature: https://github.com/phetsims/sun/issues/241#issuecomment-234031982.  But as @samreid hinted at in https://github.com/phetsims/sun/issues/241#issuecomment-234323014, adding this feature currently requires duplicate/boilerplate code.  I've recently added this feature to ComboBox and NumberControl, and thought we should discuss other methods of adding the feature.\r\n\r\nHere's the relevant code that needs to be added: \r\n\r\n```js\r\nfunction MyComponent( ..., options ) {\r\n\r\n  options = _.extend( {\r\n    enabledProperty: new Property( true ),\r\n    disabledOpacity: 0.5, // {number} opacity used to make the control look disabled\r\n  }, options );\r\n\r\n  // validate options\r\n  assert && assert( options.disabledOpacity >= 0 && options.disabledOpacity <= 1,\r\n    'invalid disabledOpacity: ' + options.disabledOpacity );\r\n\r\n  // @public\r\n  this.enabledProperty = options.enabledProperty;\r\n\r\n  // enable/disable the component\r\n  var enabledObserver = function( enabled ) {\r\n    self.pickable = enabled;\r\n    self.opacity = enabled ? 1.0 : options.disabledOpacity;\r\n  };\r\n  this.enabledProperty.link( enabledObserver );\r\n\r\n  // @private called by dispose\r\n  this.disposeMyComponent = function() {\r\n    self.enabledProperty.unlink( enabledObserver );\r\n  };\r\n}\r\n\r\nreturn inherit( Supertype, MyComponent, {\r\n\r\n  // @public\r\n  dispose: function() {\r\n    this.disposeMyComponent();\r\n  },\r\n\r\n  // @public\r\n  setEnabled: function( enabled ) { this.enabledProperty.value = enabled; },\r\n  set enabled( value ) { this.setEnabled( value ); },\r\n\r\n  // @public\r\n  getEnabled: function() { return this.enabledProperty.value; },\r\n  get enabled() { return this.getEnabled(); }\r\n} );\r\n```"},"comment":{"url":"https://api.github.com/repos/phetsims/sun/issues/comments/249983445","html_url":"https://github.com/phetsims/sun/issues/257#issuecomment-249983445","issue_url":"https://api.github.com/repos/phetsims/sun/issues/257","id":249983445,"user":{"login":"jonathanolson","id":480878,"avatar_url":"https://avatars.githubusercontent.com/u/480878?v=3","gravatar_id":"","url":"https://api.github.com/users/jonathanolson","html_url":"https://github.com/jonathanolson","followers_url":"https://api.github.com/users/jonathanolson/followers","following_url":"https://api.github.com/users/jonathanolson/following{/other_user}","gists_url":"https://api.github.com/users/jonathanolson/gists{/gist_id}","starred_url":"https://api.github.com/users/jonathanolson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jonathanolson/subscriptions","organizations_url":"https://api.github.com/users/jonathanolson/orgs","repos_url":"https://api.github.com/users/jonathanolson/repos","events_url":"https://api.github.com/users/jonathanolson/events{/privacy}","received_events_url":"https://api.github.com/users/jonathanolson/received_events","type":"User","site_admin":false},"created_at":"2016-09-27T20:10:56Z","updated_at":"2016-09-27T20:10:56Z","body":"Say you have a root node, with two sliders (slider1 on top, and slider2 below).\r\n\r\nThe hit-test will return a Trail, so say the event is over both and it's a mouse-down. downEvent() is called, which calls ```this.rootNode.trailUnderPointer( pointer )```. This traverses depth-first (children handled top to bottom). Since slider1 is on top, the returned Trail would essentially be [root, slider1]. This is the part of input handling where pickability, visibility and presence of input listeners matter, and determine whether subtrees are excluded from the search.\r\n\r\nThen eventually things make their way to dispatchToTargets. It then processes nodes in order from right to left from the trail, so:\r\n1. It iterates over slider1's listeners, firing when available.\r\n2. It iterates over root's listeners, firing when available.\r\n\r\nMy proposal is to not mess with the first part that returns the Trail (i.e. where pickability is involved), but in the second part for traversal.\r\n\r\nIf you have a trail [ root, ..., parent, node-with-flag, child, ..., leaf ] that was picked (pointer is over the leaf directly), instead of iterating through ALL of those from the leaf to the root, it would instead start with parent and go to the root, as if the trail used was [ root, ..., parent ].\r\n\r\nSo because the slider that was behind is not included in the picked trail, it won't have anything fire in the event dispatch."}}
{"actor":{"display_login":"jonathanolson"}}