diff --git a/src/app/services/editBranchService.spec.ts b/src/app/services/editBranchService.spec.ts index f240d79107a..9b39c49db24 100644 --- a/src/app/services/editBranchService.spec.ts +++ b/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: [ { diff --git a/src/assets/wise5/authoringTool/addNode/abstract-import-step/abstract-import-step.component.ts b/src/assets/wise5/authoringTool/addNode/abstract-import-step/abstract-import-step.component.ts index 48deed87144..41183bcffa2 100644 --- a/src/assets/wise5/authoringTool/addNode/abstract-import-step/abstract-import-step.component.ts +++ b/src/assets/wise5/authoringTool/addNode/abstract-import-step/abstract-import-step.component.ts @@ -32,16 +32,17 @@ 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(); @@ -49,4 +50,18 @@ export abstract class AbstractImportStepComponent implements OnInit { }); }); } + + 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)); + } } diff --git a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts b/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts index d71ba2dafda..4d991bdce01 100644 --- a/src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts +++ b/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() diff --git a/src/assets/wise5/authoringTool/new-project-template.ts b/src/assets/wise5/authoringTool/new-project-template.ts index c035ab2e5fe..4bd2f1dfa8d 100644 --- a/src/assets/wise5/authoringTool/new-project-template.ts +++ b/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: '' } } ], diff --git a/src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts b/src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts index af793e5fd58..b8809b6d32a 100644 --- a/src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts +++ b/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', diff --git a/src/assets/wise5/services/authorBranchService.ts b/src/assets/wise5/services/authorBranchService.ts index 6b6405e6833..695a1af6dd6 100644 --- a/src/assets/wise5/services/authorBranchService.ts +++ b/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); diff --git a/src/assets/wise5/services/createBranchService.ts b/src/assets/wise5/services/createBranchService.ts index e9122094086..d0679c2d9d9 100644 --- a/src/assets/wise5/services/createBranchService.ts +++ b/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)]; } diff --git a/src/assets/wise5/services/teacherProjectService.ts b/src/assets/wise5/services/teacherProjectService.ts index fc81e095df1..3e58d023cb9 100644 --- a/src/assets/wise5/services/teacherProjectService.ts +++ b/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 { const newNodeIds = []; const newComponentIds = []; diff --git a/src/assets/wise5/vle/node-icon/NodeIconColor.ts b/src/assets/wise5/vle/node-icon/NodeIconColor.ts new file mode 100644 index 00000000000..e55d7af0b2c --- /dev/null +++ b/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)]; +} diff --git a/src/messages.xlf b/src/messages.xlf index be1317b7438..a344070f566 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -128,7 +128,7 @@ src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 101 + 89 @@ -143,7 +143,7 @@ src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 106 + 94 @@ -162,7 +162,7 @@ src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 111 + 99 @@ -11916,7 +11916,7 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/authoringTool/new-project-template.ts - 80 + 94 src/assets/wise5/classroomMonitor/classroomMonitorComponents/milestone-report-button/milestone-report-button.component.html @@ -12192,14 +12192,14 @@ The branches will be removed but the steps will remain in the unit. First Step src/assets/wise5/authoringTool/new-project-template.ts - 31 + 38 Notebook src/assets/wise5/authoringTool/new-project-template.ts - 56 + 70 src/assets/wise5/services/notebookService.ts @@ -12210,11 +12210,11 @@ The branches will be removed but the steps will remain in the unit. note src/assets/wise5/authoringTool/new-project-template.ts - 68 + 82 src/assets/wise5/authoringTool/new-project-template.ts - 110 + 124 src/assets/wise5/services/notebookService.ts @@ -12225,11 +12225,11 @@ The branches will be removed but the steps will remain in the unit. notes src/assets/wise5/authoringTool/new-project-template.ts - 69 + 83 src/assets/wise5/authoringTool/new-project-template.ts - 111 + 125 src/assets/wise5/services/notebookService.ts @@ -12240,11 +12240,11 @@ The branches will be removed but the steps will remain in the unit. Notes src/assets/wise5/authoringTool/new-project-template.ts - 70 + 84 src/assets/wise5/authoringTool/new-project-template.ts - 112 + 126 src/assets/wise5/classroomMonitor/classroomMonitorComponents/notebook/notebook-workgroup-grading/notebook-workgroup-grading.component.html @@ -12263,7 +12263,7 @@ The branches will be removed but the steps will remain in the unit. report src/assets/wise5/authoringTool/new-project-template.ts - 78 + 92 src/assets/wise5/services/notebookService.ts @@ -12274,7 +12274,7 @@ The branches will be removed but the steps will remain in the unit. reports src/assets/wise5/authoringTool/new-project-template.ts - 79 + 93 src/assets/wise5/services/notebookService.ts @@ -12285,78 +12285,78 @@ The branches will be removed but the steps will remain in the unit. Final Report src/assets/wise5/authoringTool/new-project-template.ts - 87 + 101 Final summary report of what you learned in this unit src/assets/wise5/authoringTool/new-project-template.ts - 88 + 102 Use this space to write your final report using evidence from your notebook. src/assets/wise5/authoringTool/new-project-template.ts - 89 + 103 <h3>This is a heading</h3><p>This is a paragraph.</p> src/assets/wise5/authoringTool/new-project-template.ts - 90 + 104 Teacher Notebook src/assets/wise5/authoringTool/new-project-template.ts - 98 + 112 teacher notes src/assets/wise5/authoringTool/new-project-template.ts - 120 + 134 src/assets/wise5/authoringTool/new-project-template.ts - 121 + 135 Teacher Notes src/assets/wise5/authoringTool/new-project-template.ts - 122 + 136 src/assets/wise5/authoringTool/new-project-template.ts - 129 + 143 Notes for the teacher as they're running the WISE unit src/assets/wise5/authoringTool/new-project-template.ts - 130 + 144 Use this space to take notes for this unit src/assets/wise5/authoringTool/new-project-template.ts - 131 + 145 <p>Use this space to take notes for this unit</p> src/assets/wise5/authoringTool/new-project-template.ts - 132 + 146 @@ -13610,7 +13610,7 @@ The branches will be removed but the steps will remain in the unit. src/assets/wise5/services/createBranchService.ts - 50 + 54 @@ -16014,49 +16014,49 @@ Are you sure you want to proceed? Knowledge Integration elicit ideas src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 100 + 88 Knowledge Integration discover ideas src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 105 + 93 Knowledge Integration distinguish ideas src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 110 + 98 Knowledge Integration connect ideas and reflect src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 115 + 103 Connect Ideas & Reflect src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 116 + 104 Knowledge Integration cycle src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 120 + 108 KI Cycle src/assets/wise5/common/node-icon-chooser-dialog/node-icon-chooser-dialog.component.ts - 121 + 109