feat(Step Icon): Improve default option

src/app/services/editBranchService.spec.ts

@@ -58,6 +58,13 @@ function editBranch() {
         id: 'node2',
         title: 'Branch point',
         type: 'node',
+        icon: {
+          color: '#00B0FF',
+          type: 'font',
+          fontSet: 'material-icons',
+          fontName: 'school',
+          imgSrc: ''
+        },
         transitionLogic: {
           transitions: [
             {

src/assets/wise5/authoringTool/addNode/abstract-import-step/abstract-import-step.component.ts

@@ -32,21 +32,36 @@ export abstract class AbstractImportStepComponent implements OnInit {
     this.submitting = true;
     this.copyNodesService
       .copyNodes(nodesToImport, this.importProjectId, this.configService.getProjectId())
-      .subscribe((copiedNodes: any[]) => {
-        const nodesWithNewNodeIds = this.projectService.getNodesWithNewIds(copiedNodes);
+      .subscribe((copiedNodesWithOldIds: any[]) => {
+        const copiedNodes = this.replaceNodesWithNewIds(copiedNodesWithOldIds);
         if (this.target.type === 'firstStepInBranchPath') {
           this.insertFirstNodeInBranchPathService.insertNodes(
-            nodesWithNewNodeIds,
+            copiedNodes,
             this.target.branchNodeId,
             this.target.firstNodeIdInBranchPath
           );
         } else {
-          this.insertNodesService.insertNodes(nodesWithNewNodeIds, this.target.targetId);
+          this.setColor(copiedNodes, this.target.targetId);
+          this.insertNodesService.insertNodes(copiedNodes, this.target.targetId);
         }
         this.projectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => {
           this.projectService.refreshProject();
           this.router.navigate(['../../..'], { relativeTo: this.route });
         });
       });
   }
+
+  private replaceNodesWithNewIds(nodes: any[]): any[] {
+    const oldToNewIds = this.projectService.getOldToNewIds(nodes);
+    return nodes.map((node: any) => this.projectService.replaceOldIds(node, oldToNewIds));
+  }
+
+  private setColor(nodes: any[], nodeId: string): void {
+    const color = (
+      this.projectService.isGroupNode(nodeId)
+        ? this.projectService.getNodeById(nodeId)
+        : this.projectService.getParentGroup(nodeId)
+    ).icon.color;
+    nodes.filter((node: any) => node.icon).forEach((node: any) => (node.icon.color = color));
+  }
 }

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts

@@ -81,9 +81,11 @@ export class AddYourOwnNodeComponent {
     const newNode = this.projectService.createNode(this.addNodeFormGroup.controls['title'].value);
     switch (this.target.type) {
       case 'in':
+        newNode.icon.color = this.projectService.getNodeById(this.target.targetId).icon.color;
         this.projectService.createNodeInside(newNode, this.target.targetId);
         break;
       case 'after':
+        newNode.icon.color = this.projectService.getParentGroup(this.target.targetId).icon.color;
         this.projectService.createNodeAfter(newNode, this.target.targetId);
         break;
       case 'firstStepInBranchPath':
@@ -100,10 +102,6 @@ export class AddYourOwnNodeComponent {
     });
   }
 
-  protected isGroupNode(nodeId: string): boolean {
-    return this.projectService.isGroupNode(nodeId);
-  }
-
   private addInitialComponents(nodeId: string, components: any[]): void {
     components
       .reverse()

src/assets/wise5/authoringTool/new-project-template.ts

@@ -23,6 +23,13 @@ export const newProjectTemplate = {
       },
       transitionLogic: {
         transitions: []
+      },
+      icon: {
+        color: '#00B0FF',
+        type: 'font',
+        fontSet: 'material-icons',
+        fontName: 'dashboard',
+        imgSrc: ''
       }
     },
     {
@@ -35,6 +42,13 @@ export const newProjectTemplate = {
       showSubmitButton: false,
       transitionLogic: {
         transitions: []
+      },
+      icon: {
+        color: '#00B0FF',
+        type: 'font',
+        fontSet: 'material-icons',
+        fontName: 'school',
+        imgSrc: ''
       }
     }
   ],

src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts

@@ -9,6 +9,7 @@ import { MatChipsModule } from '@angular/material/chips';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
+import { NODE_ICON_COLORS } from '../../vle/node-icon/NodeIconColor';
 
 interface KIIcon {
   imgAlt: string;
@@ -32,20 +33,7 @@ interface KIIcon {
   templateUrl: 'node-icon-chooser-dialog.component.html'
 })
 export class NodeIconChooserDialogComponent {
-  protected colors = [
-    '#66BB6A',
-    '#009688',
-    '#00B0FF',
-    '#1565C0',
-    '#673AB7',
-    '#AB47BC',
-    '#E91E63',
-    '#D50000',
-    '#F57C00',
-    '#FBC02D',
-    '#795548',
-    '#757575'
-  ];
+  protected colors = NODE_ICON_COLORS;
 
   protected fontNames = [
     'access_time',

src/assets/wise5/services/authorBranchService.ts

@@ -22,6 +22,7 @@ export abstract class AuthorBranchService {
   ): void {
     const newNode = this.projectService.createNode($localize`Path ${pathIndex + 1}`);
     newNode.id = nodeId;
+    newNode.icon.color = this.projectService.getParentGroup(branchNode.id).icon?.color || '#00B0FF';
     this.addTransitionFromBranchNodeToPathNode(params, branchNode, newNode, pathIndex);
     this.projectService.addNode(newNode);
     this.projectService.addApplicationNode(newNode);

src/assets/wise5/services/createBranchService.ts

@@ -21,7 +21,7 @@ export class CreateBranchService extends AuthorBranchService {
     this.createPathSteps(params, branchNode, newNodeIds);
     const mergeStep: any =
       params.mergeStepId === ''
-        ? this.createMergeStep(newNodeIds, nodeIdBranchNodeTransitionsTo)
+        ? this.createMergeStep(newNodeIds, branchNode.id, nodeIdBranchNodeTransitionsTo)
         : this.projectService.getNode(params.mergeStepId);
     this.setPathStepTransitions(newNodeIds, mergeStep.id);
     this.setBranchNodeTransitionLogic(branchNode, params.criteria);
@@ -46,9 +46,15 @@ export class CreateBranchService extends AuthorBranchService {
     }
   }
 
-  private createMergeStep(newNodeIds: string[], nodeIdBranchNodeTransitionsTo: string): any {
+  private createMergeStep(
+    newNodeIds: string[],
+    branchNodeId: string,
+    nodeIdBranchNodeTransitionsTo: string
+  ): any {
     const mergeStepNode = this.projectService.createNode($localize`Merge Step`);
     mergeStepNode.id = this.projectService.getNextAvailableNodeId(newNodeIds);
+    mergeStepNode.icon.color =
+      this.projectService.getParentGroup(branchNodeId).icon?.color || '#00B0FF';
     if (nodeIdBranchNodeTransitionsTo !== '') {
       mergeStepNode.transitionLogic.transitions = [new Transition(nodeIdBranchNodeTransitionsTo)];
     }

src/assets/wise5/services/teacherProjectService.ts

@@ -13,6 +13,7 @@ import { branchPathBackgroundColors } from '../common/color/color';
 import { reduceByUniqueId } from '../common/array/array';
 import { NodeTypeSelected } from '../authoringTool/domain/node-type-selected';
 import { ComponentContent } from '../common/ComponentContent';
+import { getRandomNodeIconColor } from '../vle/node-icon/NodeIconColor';
 
 @Injectable()
 export class TeacherProjectService extends ProjectService {
@@ -72,7 +73,14 @@ export class TeacherProjectService extends ProjectService {
       transitionLogic: {
         transitions: []
       },
-      ids: []
+      ids: [],
+      icon: {
+        color: getRandomNodeIconColor(),
+        type: 'font',
+        fontSet: 'material-icons',
+        fontName: 'dashboard',
+        imgSrc: ''
+      }
     };
   }
 
@@ -81,7 +89,7 @@ export class TeacherProjectService extends ProjectService {
    * @param title the title of the node
    * @returns the node object
    */
-  createNode(title) {
+  createNode(title: string): any {
     return {
       id: this.getNextAvailableNodeId(),
       title: title,
@@ -90,19 +98,19 @@ export class TeacherProjectService extends ProjectService {
       transitionLogic: {
         transitions: []
       },
+      icon: {
+        color: '#00B0FF',
+        type: 'font',
+        fontSet: 'material-icons',
+        fontName: 'school',
+        imgSrc: ''
+      },
       showSaveButton: false,
       showSubmitButton: false,
       components: []
     };
   }
 
-  getNodesWithNewIds(nodes: any[]): any[] {
-    const oldToNewIds = this.getOldToNewIds(nodes);
-    return nodes.map((node: any) => {
-      return this.replaceOldIds(node, oldToNewIds);
-    });
-  }
-
   getOldToNewIds(nodes: any[]): Map<string, string> {
     const newNodeIds = [];
     const newComponentIds = [];

src/assets/wise5/vle/node-icon/NodeIconColor.ts

@@ -0,0 +1,18 @@
+export const NODE_ICON_COLORS = [
+  '#66BB6A',
+  '#009688',
+  '#00B0FF',
+  '#1565C0',
+  '#673AB7',
+  '#AB47BC',
+  '#E91E63',
+  '#D50000',
+  '#F57C00',
+  '#FBC02D',
+  '#795548',
+  '#757575'
+];
+
+export function getRandomNodeIconColor(): string {
+  return NODE_ICON_COLORS[Math.floor(Math.random() * NODE_ICON_COLORS.length)];
+}