Change the TreeService to a singleton.

accessible/app.component.js

@@ -55,11 +55,18 @@ blocklyApp.AppView = ng.core
     `,
     directives: [blocklyApp.ToolboxComponent, blocklyApp.WorkspaceComponent],
     pipes: [blocklyApp.TranslatePipe],
-    // The clipboard and utils services are declared here, so that all
+    // The clipboard, tree and utils services are declared here, so that all
     // components in the application use the same instance of the service.
     // https://www.sitepoint.com/angular-2-components-providers-classes-factories-values/
-    providers: [blocklyApp.ClipboardService, blocklyApp.UtilsService]
+    providers: [
+        blocklyApp.ClipboardService, blocklyApp.TreeService,
+        blocklyApp.UtilsService]
   })
   .Class({
-    constructor: function() {}
+    constructor: [blocklyApp.TreeService, function(_treeService) {
+      this.treeService = _treeService;
+    }],
+    ngAfterViewInit: function() {
+      this.treeService.initTreeRegistry();
+    }
   });

accessible/toolbox.component.js

@@ -66,8 +66,7 @@ blocklyApp.ToolboxComponent = ng.core
         </div>
       </ol>
     `,
-    directives: [blocklyApp.ToolboxTreeComponent],
-    providers: [blocklyApp.TreeService],
+    directives: [blocklyApp.ToolboxTreeComponent]
   })
   .Class({
     constructor: [

accessible/tree.service.js

@@ -18,8 +18,8 @@
  */
 
 /**
- * @fileoverview Angular2 Service that handles all tree keyboard navigation.
- * A separate TreeService is constructed for each tree in the application.
+ * @fileoverview Angular2 Service that handles tree keyboard navigation.
+ * This is a singleton service for the entire application.
  *
  * @author madeeha@google.com (Madeeha Ghori)
  */
@@ -27,8 +27,8 @@
 blocklyApp.TreeService = ng.core
   .Class({
     constructor: function() {
-      blocklyApp.debug && console.log('making a new tree service');
-      this.trees = document.getElementsByClassName('blocklyTree');
+      // A list of all trees in the application.
+      this.treeRegistry = [];
       // Keeping track of the last key pressed. If the user presses
       // enter (to edit a text input or press a button), the keyboard
       // focus shifts to that element. In the next keystroke, if the user
@@ -36,6 +36,57 @@ blocklyApp.TreeService = ng.core
       // to shift focus back to the tree as a whole.
       this.previousKey_ = null;
     },
+    initTreeRegistry: function() {
+      this.treeRegistry = [];
+      this.treeRegistry.push(document.getElementById('blockly-toolbox-tree'));
+      // TODO(sll): Extend this to handle injected toolbar buttons.
+      this.treeRegistry.push(document.getElementById('clear-workspace'));
+
+      // Focus on the toolbox tree.
+      this.treeRegistry[0].focus();
+    },
+    isTreeInRegistry: function(treeId) {
+      return this.treeRegistry.some(function(tree) {
+        return tree.id == treeId;
+      });
+    },
+    addTreeToRegistry: function(tree) {
+      this.treeRegistry.push(tree);
+    },
+    deleteTreeFromRegistry: function(treeId) {
+      // Shift focus to the next tree (if it exists), otherwise shift focus
+      // to the previous tree.
+      var movedToNextTree = this.goToNextTree(treeId);
+      if (!movedToNextTree) {
+        this.goToPreviousTree(treeId);
+      }
+
+      // Delete the tree from the tree registry.
+      for (var i = 0; i < this.treeRegistry.length; i++) {
+        if (this.treeRegistry[i].id == treeId) {
+          this.treeRegistry.splice(i, 1);
+          break;
+        }
+      }
+    },
+    goToNextTree: function(treeId) {
+      for (var i = 0; i < this.treeRegistry.length - 1; i++) {
+        if (this.treeRegistry[i].id == treeId) {
+          this.treeRegistry[i + 1].focus();
+          return true;
+        }
+      }
+      return false;
+    },
+    goToPreviousTree: function(treeId) {
+      for (var i = this.treeRegistry.length - 1; i > 0; i--) {
+        if (this.treeRegistry[i].id == treeId) {
+          this.treeRegistry[i - 1].focus();
+          return true;
+        }
+      }
+      return false;
+    },
     // Make a given node the active descendant of a given tree.
     setActiveDesc: function(node, tree, keepFocus) {
       blocklyApp.debug && console.log('setting activeDesc for tree ' + tree.id);
@@ -62,7 +113,8 @@ blocklyApp.TreeService = ng.core
       return document.getElementById(activeDescendantId);
     },
     onWorkspaceToolbarKeypress: function(e, treeId) {
-      blocklyApp.debug && console.log(e.keyCode + 'inside TreeService onWorkspaceToolbarKeypress');
+      blocklyApp.debug && console.log(
+          e.keyCode + 'inside TreeService onWorkspaceToolbarKeypress');
       switch (e.keyCode) {
         case 9:
           // 16,9: shift, tab
@@ -79,29 +131,6 @@ blocklyApp.TreeService = ng.core
           break;
       }
     },
-    goToNextTree: function(treeId, e) {
-      for (var i = 0; i < this.trees.length; i++) {
-        if (this.trees[i].id == treeId) {
-          if (i + 1 < this.trees.length) {
-            this.trees[i + 1].focus();
-          }
-          break;
-        }
-      }
-    },
-    goToPreviousTree: function(treeId, e) {
-      if (treeId == this.trees[0].id) {
-        return;
-      }
-      for (var i = (this.trees.length - 1); i >= 0; i--) {
-        if (this.trees[i].id == treeId) {
-          if (i - 1 < this.trees.length) {
-            this.trees[i - 1].focus();
-          }
-          break;
-        }
-      }
-    },
     onKeypress: function(e, tree) {
       var treeId = tree.id;
       var node = this.getActiveDesc(treeId);

accessible/workspace-tree.component.js

@@ -41,7 +41,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core
             <li [id]="idMap['cutListItem']" role="treeitem"
                 [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['cutButton'], 'blockly-button')"
                 [attr.aria-level]="level+2" aria-selected=false>
-              <button [id]="idMap['cutButton']" (click)="clipboardService.cut(block)">{{'CUT_BLOCK'|translate}}</button>
+              <button [id]="idMap['cutButton']" (click)="cutToClipboard(block)">{{'CUT_BLOCK'|translate}}</button>
             </li>
             <li [id]="idMap['copyListItem']" role="treeitem"
                 [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['copyButton'], 'blockly-button')"
@@ -81,7 +81,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core
             <li [id]="idMap['sendToSelectedListItem']" role="treeitem"
                 [attr.aria-labelledBy]="generateAriaLabelledByAttr(idMap['sendToSelectedButton'], 'blockly-button', !clipboardService.isBlockCompatibleWithMarkedConnection(block))"
                 [attr.aria-level]="level+2" aria-selected=false>
-              <button [id]="idMap['sendToSelectedButton']" (click)="sendToSelected(block)"
+              <button [id]="idMap['sendToSelectedButton']" (click)="sendToMarkedSpot(block)"
                       [disabled]="!clipboardService.isBlockCompatibleWithMarkedConnection(block)">{{'MOVE_TO_MARKED_SPOT'|translate}}</button>
             </li>
             <li [id]="idMap['delete']" role="treeitem"
@@ -94,8 +94,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core
         <div *ngFor="#inputBlock of block.inputList; #i = index">
           <blockly-field *ngFor="#field of inputBlock.fieldRow" [field]="field"></blockly-field>
           <blockly-workspace-tree *ngIf="inputBlock.connection && inputBlock.connection.targetBlock()"
-                                  [block]="inputBlock.connection.targetBlock()" [isTopBlock]="false"
-                                  [level]="level">
+                                  [block]="inputBlock.connection.targetBlock()" [level]="level">
           </blockly-workspace-tree>
           <li #inputList [attr.aria-level]="level + 1" [id]="idMap['inputList' + i]"
               [attr.aria-labelledBy]="generateAriaLabelledByAttr('blockly-menu', idMap['inputMenuLabel' + i])"
@@ -124,16 +123,15 @@ blocklyApp.WorkspaceTreeComponent = ng.core
 
     <blockly-workspace-tree *ngIf= "block.nextConnection && block.nextConnection.targetBlock()"
                             [block]="block.nextConnection.targetBlock()"
-                            [isTopBlock]="false"
                             [level]="level">
     </blockly-workspace-tree>
     `,
     directives: [blocklyApp.FieldComponent, ng.core.forwardRef(function() {
       return blocklyApp.WorkspaceTreeComponent;
     })],
-    inputs: ['block', 'isTopBlock', 'topBlockIndex', 'level', 'parentId', 'tree'],
-    pipes: [blocklyApp.TranslatePipe],
-    providers: [blocklyApp.TreeService],
+    // The 'tree' input is only passed down at the top level.
+    inputs: ['block', 'level', 'tree'],
+    pipes: [blocklyApp.TranslatePipe]
   })
   .Class({
     constructor: [
@@ -160,16 +158,15 @@ blocklyApp.WorkspaceTreeComponent = ng.core
         }
       }
       this.idMap = this.utilsService.generateIds(elementsNeedingIds);
-      this.idMap['parentList'] =
-          this.isTopBlock ? this.parentId + '-node0' :
-          this.utilsService.generateUniqueId();
+      this.idMap['parentList'] = this.utilsService.generateUniqueId();
     },
     ngAfterViewInit: function() {
-      // If this is a top-level tree in the workspace, set its active
-      // descendant after the ids have been computed.
+      // If this is a top-level tree in the workspace, add it to the tree
+      // registry and set its active descendant.
       if (this.tree &&
-          this.tree.getAttribute('aria-activedescendant') ==
-              this.idMap['parentList']) {
+          (!this.tree.id || !this.treeService.isTreeInRegistry(this.tree.id))) {
+        this.tree.id = this.utilsService.generateUniqueId();
+        this.treeService.addTreeToRegistry(this.tree);
         this.treeService.setActiveDesc(
             document.getElementById(this.idMap['parentList']),
             this.tree);
@@ -179,16 +176,24 @@ blocklyApp.WorkspaceTreeComponent = ng.core
       return this.clipboardService.isClipboardCompatibleWithConnection(
           connection);
     },
-    deleteBlock: function(block) {
-      // If this is the top block, shift focus to the previous tree.
-      var topBlocks = blocklyApp.workspace.topBlocks_;
-      for (var i = 0; i < topBlocks.length; i++) {
-        if (topBlocks[i].id == block.id) {
-          this.treeService.goToPreviousTree(this.parentId);
-          break;
-        }
+    isTopLevelBlock: function(block) {
+      return blocklyApp.workspace.topBlocks_.some(function(topBlock) {
+        return topBlock.id == block.id;
+      });
+    },
+    cutToClipboard: function(block) {
+      if (this.isTopLevelBlock(block)) {
+        this.treeService.deleteTreeFromRegistry(this.tree.id);
       }
-      // If this is not the top block, change the active descendant of the tree.
+
+      this.clipboardService.cut(block);
+    },
+    deleteBlock: function(block, cutToClipboard) {
+      if (this.isTopLevelBlock(block)) {
+        this.treeService.deleteTreeFromRegistry(this.tree.id);
+      }
+
+      // TODO(sll): Change the active descendant of the tree.
       block.dispose(true);
     },
     generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
@@ -201,11 +206,14 @@ blocklyApp.WorkspaceTreeComponent = ng.core
     hasNextConnection: function(block) {
       return Boolean(block.nextConnection);
     },
-    sendToSelected: function(block) {
-      if (this.clipboardService) {
-        this.clipboardService.pasteToMarkedConnection(block, false);
-        block.dispose(true);
-        alert('Block moved to marked spot: ' + block.toString());
+    sendToMarkedSpot: function(block) {
+      this.clipboardService.pasteToMarkedConnection(block, false);
+
+      if (this.isTopLevelBlock(block)) {
+        this.treeService.deleteTreeFromRegistry(this.tree.id);
       }
+      block.dispose(true);
+
+      alert('Block moved to marked spot: ' + block.toString());
     }
   });

accessible/workspace.component.js

@@ -37,27 +37,24 @@ blocklyApp.WorkspaceComponent = ng.core
           {{buttonConfig.text}}
         </button>
       </span>
-      <button id="clear-workspace" (click)="workspace.clear()"
+      <button id="clear-workspace" (click)="clearWorkspace()"
               [disabled]="isWorkspaceEmpty()" class="blocklyTree">
         {{'CLEAR_WORKSPACE'|translate}}
       </button>
     </div>
 
     <div *ngIf="workspace">
-      <ol #tree id="blockly-workspace-tree{{i}}" *ngFor="#block of workspace.topBlocks_; #i = index"
-          tabIndex="0" role="group" class="blocklyTree" [attr.aria-labelledby]="workspaceTitle.id"
-          [attr.aria-activedescendant]="tree.getAttribute('aria-activedescendant') || tree.id + '-node0' "
+      <ol #tree *ngFor="#block of workspace.topBlocks_; #i = index"
+          tabIndex="0" role="group" class="blocklyTree"
+          [attr.aria-labelledby]="workspaceTitle.id"
           (keydown)="onKeypress($event, tree)">
-        <blockly-workspace-tree [level]=1 [block]="block" [isTopBlock]="true"
-                                [topBlockIndex]="i" [parentId]="tree.id"
-                                [tree]="tree">
+        <blockly-workspace-tree [level]=1 [block]="block" [tree]="tree">
         </blockly-workspace-tree>
       </ol>
     </div>
     `,
     directives: [blocklyApp.WorkspaceTreeComponent],
-    pipes: [blocklyApp.TranslatePipe],
-    providers: [blocklyApp.TreeService]
+    pipes: [blocklyApp.TranslatePipe]
   })
   .Class({
     constructor: [blocklyApp.TreeService, function(_treeService) {
@@ -72,14 +69,18 @@ blocklyApp.WorkspaceComponent = ng.core
       this.workspace = blocklyApp.workspace;
       this.treeService = _treeService;
     }],
+    clearWorkspace: function() {
+      this.workspace.clear();
+      this.treeService.initTreeRegistry();
+    },
     onWorkspaceToolbarKeypress: function(event) {
-      var activeElementId = document.activeElement.id;
-      this.treeService.onWorkspaceToolbarKeypress(event, activeElementId);
+      this.treeService.onWorkspaceToolbarKeypress(
+          event, document.activeElement.id);
     },
     onKeypress: function(event, tree){
       this.treeService.onKeypress(event, tree);
     },
     isWorkspaceEmpty: function() {
-      return !blocklyApp.workspace.topBlocks_.length;
+      return !this.workspace.topBlocks_.length;
     }
   });