Skip to content

Commit 26269e7

Browse files
hirokiterashimahirokiterashima
authored
feat(Step Icon): Improve default option (#2290)
1 parent cd71f5e commit 26269e7

11 files changed

Lines changed: 144 additions & 68 deletions

File tree

‎src/app/services/editBranchService.spec.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,13 @@ function editBranch() {
5858
id: 'node2',
5959
title: 'Branch point',
6060
type: 'node',
61+
icon: {
62+
color: '#00B0FF',
63+
type: 'font',
64+
fontSet: 'material-icons',
65+
fontName: 'school',
66+
imgSrc: ''
67+
},
6168
transitionLogic: {
6269
transitions: [
6370
{

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { InsertNodesService } from '../../../services/insertNodesService';
66
import { TeacherProjectService } from '../../../services/teacherProjectService';
77
import { InsertFirstNodeInBranchPathService } from '../../../services/insertFirstNodeInBranchPathService';
88
import { AddStepTarget } from '../../../../../app/domain/addStepTarget';
9+
import { ensureDefaultIcon } from '../../../common/Node';
910

1011
@Directive()
1112
export abstract class AbstractImportStepComponent implements OnInit {
@@ -32,21 +33,36 @@ export abstract class AbstractImportStepComponent implements OnInit {
3233
this.submitting = true;
3334
this.copyNodesService
3435
.copyNodes(nodesToImport, this.importProjectId, this.configService.getProjectId())
35-
.subscribe((copiedNodes: any[]) => {
36-
const nodesWithNewNodeIds = this.projectService.getNodesWithNewIds(copiedNodes);
36+
.subscribe((copiedNodesWithOldIds: any[]) => {
37+
const copiedNodes = this.replaceNodesWithNewIds(copiedNodesWithOldIds);
38+
ensureDefaultIcon(copiedNodes);
3739
if (this.target.type === 'firstStepInBranchPath') {
3840
this.insertFirstNodeInBranchPathService.insertNodes(
39-
nodesWithNewNodeIds,
41+
copiedNodes,
4042
this.target.branchNodeId,
4143
this.target.firstNodeIdInBranchPath
4244
);
4345
} else {
44-
this.insertNodesService.insertNodes(nodesWithNewNodeIds, this.target.targetId);
46+
this.setColor(copiedNodes, this.target.targetId);
47+
this.insertNodesService.insertNodes(copiedNodes, this.target.targetId);
4548
}
4649
this.projectService.checkPotentialStartNodeIdChangeThenSaveProject().then(() => {
4750
this.projectService.refreshProject();
4851
this.router.navigate(['../../..'], { relativeTo: this.route });
4952
});
5053
});
5154
}
55+
56+
private replaceNodesWithNewIds(nodes: any[]): any[] {
57+
const oldToNewIds = this.projectService.getOldToNewIds(nodes);
58+
return nodes.map((node: any) => this.projectService.replaceOldIds(node, oldToNewIds));
59+
}
60+
61+
private setColor(nodes: any[], nodeId: string): void {
62+
const nodeToMatchColor = this.projectService.isGroupNode(nodeId)
63+
? this.projectService.getNodeById(nodeId)
64+
: this.projectService.getParentGroup(nodeId);
65+
ensureDefaultIcon([nodeToMatchColor]);
66+
nodes.forEach((node: any) => (node.icon.color = nodeToMatchColor.icon.color));
67+
}
5268
}

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
2121
import { MatInputModule } from '@angular/material/input';
2222
import { InsertFirstNodeInBranchPathService } from '../../../services/insertFirstNodeInBranchPathService';
2323
import { AddStepTarget } from '../../../../../app/domain/addStepTarget';
24+
import { ensureDefaultIcon } from '../../../common/Node';
2425

2526
@Component({
2627
imports: [
@@ -79,6 +80,12 @@ export class AddYourOwnNodeComponent {
7980
protected submit(): void {
8081
this.submitting = true;
8182
const newNode = this.projectService.createNode(this.addNodeFormGroup.controls['title'].value);
83+
const groupNode =
84+
this.target.type === 'in'
85+
? this.projectService.getNodeById(this.target.targetId)
86+
: this.projectService.getParentGroup(this.target.targetId);
87+
ensureDefaultIcon([groupNode]);
88+
newNode.icon.color = groupNode.icon.color;
8289
switch (this.target.type) {
8390
case 'in':
8491
this.projectService.createNodeInside(newNode, this.target.targetId);
@@ -100,10 +107,6 @@ export class AddYourOwnNodeComponent {
100107
});
101108
}
102109

103-
protected isGroupNode(nodeId: string): boolean {
104-
return this.projectService.isGroupNode(nodeId);
105-
}
106-
107110
private addInitialComponents(nodeId: string, components: any[]): void {
108111
components
109112
.reverse()

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ export const newProjectTemplate = {
2323
},
2424
transitionLogic: {
2525
transitions: []
26+
},
27+
icon: {
28+
color: '#00B0FF',
29+
type: 'font',
30+
fontSet: 'material-icons',
31+
fontName: 'dashboard',
32+
imgSrc: ''
2633
}
2734
},
2835
{
@@ -35,6 +42,13 @@ export const newProjectTemplate = {
3542
showSubmitButton: false,
3643
transitionLogic: {
3744
transitions: []
45+
},
46+
icon: {
47+
color: '#00B0FF',
48+
type: 'font',
49+
fontSet: 'material-icons',
50+
fontName: 'school',
51+
imgSrc: ''
3852
}
3953
}
4054
],

‎src/assets/wise5/common/Node.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,3 +235,18 @@ export class Node {
235235
return this.components.findIndex((component) => component.id === componentId);
236236
}
237237
}
238+
239+
export function ensureDefaultIcon(nodes: Node[]): void {
240+
nodes
241+
.filter((node: Node) => !node.icon)
242+
.forEach(
243+
(node: Node) =>
244+
(node.icon = {
245+
color: '#00B0FF',
246+
type: 'font',
247+
fontSet: 'material-icons',
248+
fontName: node.type === 'node' ? 'school' : 'dashboard',
249+
imgSrc: ''
250+
})
251+
);
252+
}

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

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { MatChipsModule } from '@angular/material/chips';
99
import { MatDividerModule } from '@angular/material/divider';
1010
import { MatButtonModule } from '@angular/material/button';
1111
import { RouterModule } from '@angular/router';
12+
import { NODE_ICON_COLORS } from '../../vle/node-icon/NodeIconColor';
1213

1314
interface KIIcon {
1415
imgAlt: string;
@@ -32,20 +33,7 @@ interface KIIcon {
3233
templateUrl: 'node-icon-chooser-dialog.component.html'
3334
})
3435
export class NodeIconChooserDialogComponent {
35-
protected colors = [
36-
'#66BB6A',
37-
'#009688',
38-
'#00B0FF',
39-
'#1565C0',
40-
'#673AB7',
41-
'#AB47BC',
42-
'#E91E63',
43-
'#D50000',
44-
'#F57C00',
45-
'#FBC02D',
46-
'#795548',
47-
'#757575'
48-
];
36+
protected colors = NODE_ICON_COLORS;
4937

5038
protected fontNames = [
5139
'access_time',

‎src/assets/wise5/services/authorBranchService.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export abstract class AuthorBranchService {
2222
): void {
2323
const newNode = this.projectService.createNode($localize`Path ${pathIndex + 1}`);
2424
newNode.id = nodeId;
25+
newNode.icon.color = this.projectService.getParentGroup(branchNode.id).icon?.color || '#00B0FF';
2526
this.addTransitionFromBranchNodeToPathNode(params, branchNode, newNode, pathIndex);
2627
this.projectService.addNode(newNode);
2728
this.projectService.addApplicationNode(newNode);

‎src/assets/wise5/services/createBranchService.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export class CreateBranchService extends AuthorBranchService {
2121
this.createPathSteps(params, branchNode, newNodeIds);
2222
const mergeStep: any =
2323
params.mergeStepId === ''
24-
? this.createMergeStep(newNodeIds, nodeIdBranchNodeTransitionsTo)
24+
? this.createMergeStep(newNodeIds, branchNode.id, nodeIdBranchNodeTransitionsTo)
2525
: this.projectService.getNode(params.mergeStepId);
2626
this.setPathStepTransitions(newNodeIds, mergeStep.id);
2727
this.setBranchNodeTransitionLogic(branchNode, params.criteria);
@@ -46,9 +46,15 @@ export class CreateBranchService extends AuthorBranchService {
4646
}
4747
}
4848

49-
private createMergeStep(newNodeIds: string[], nodeIdBranchNodeTransitionsTo: string): any {
49+
private createMergeStep(
50+
newNodeIds: string[],
51+
branchNodeId: string,
52+
nodeIdBranchNodeTransitionsTo: string
53+
): any {
5054
const mergeStepNode = this.projectService.createNode($localize`Merge Step`);
5155
mergeStepNode.id = this.projectService.getNextAvailableNodeId(newNodeIds);
56+
mergeStepNode.icon.color =
57+
this.projectService.getParentGroup(branchNodeId).icon?.color || '#00B0FF';
5258
if (nodeIdBranchNodeTransitionsTo !== '') {
5359
mergeStepNode.transitionLogic.transitions = [new Transition(nodeIdBranchNodeTransitionsTo)];
5460
}

‎src/assets/wise5/services/teacherProjectService.ts‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { branchPathBackgroundColors } from '../common/color/color';
1313
import { reduceByUniqueId } from '../common/array/array';
1414
import { NodeTypeSelected } from '../authoringTool/domain/node-type-selected';
1515
import { ComponentContent } from '../common/ComponentContent';
16+
import { getRandomNodeIconColor } from '../vle/node-icon/NodeIconColor';
1617

1718
@Injectable()
1819
export class TeacherProjectService extends ProjectService {
@@ -72,7 +73,14 @@ export class TeacherProjectService extends ProjectService {
7273
transitionLogic: {
7374
transitions: []
7475
},
75-
ids: []
76+
ids: [],
77+
icon: {
78+
color: getRandomNodeIconColor(),
79+
type: 'font',
80+
fontSet: 'material-icons',
81+
fontName: 'dashboard',
82+
imgSrc: ''
83+
}
7684
};
7785
}
7886

@@ -81,7 +89,7 @@ export class TeacherProjectService extends ProjectService {
8189
* @param title the title of the node
8290
* @returns the node object
8391
*/
84-
createNode(title) {
92+
createNode(title: string): any {
8593
return {
8694
id: this.getNextAvailableNodeId(),
8795
title: title,
@@ -90,19 +98,19 @@ export class TeacherProjectService extends ProjectService {
9098
transitionLogic: {
9199
transitions: []
92100
},
101+
icon: {
102+
color: '#00B0FF',
103+
type: 'font',
104+
fontSet: 'material-icons',
105+
fontName: 'school',
106+
imgSrc: ''
107+
},
93108
showSaveButton: false,
94109
showSubmitButton: false,
95110
components: []
96111
};
97112
}
98113

99-
getNodesWithNewIds(nodes: any[]): any[] {
100-
const oldToNewIds = this.getOldToNewIds(nodes);
101-
return nodes.map((node: any) => {
102-
return this.replaceOldIds(node, oldToNewIds);
103-
});
104-
}
105-
106114
getOldToNewIds(nodes: any[]): Map<string, string> {
107115
const newNodeIds = [];
108116
const newComponentIds = [];

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export const NODE_ICON_COLORS = [
2+
'#66BB6A',
3+
'#009688',
4+
'#00B0FF',
5+
'#1565C0',
6+
'#673AB7',
7+
'#AB47BC',
8+
'#E91E63',
9+
'#D50000',
10+
'#F57C00',
11+
'#FBC02D',
12+
'#795548',
13+
'#757575'
14+
];
15+
16+
export function getRandomNodeIconColor(): string {
17+
return NODE_ICON_COLORS[Math.floor(Math.random() * NODE_ICON_COLORS.length)];
18+
}

0 commit comments

Comments
 (0)