feat(Label Component): Order labels from oldest to newest (#944)

src/app/services/labelService.spec.ts

@@ -135,7 +135,9 @@ function createFabricLabel() {
     pointSize,
     fontSize,
     labelWidth,
-    studentDataVersion
+    studentDataVersion,
+    1,
+    false
   );
 }
 

src/assets/wise5/components/label/label-authoring/label-authoring.component.ts

@@ -55,7 +55,8 @@ export class LabelAuthoring extends ComponentAuthoring {
       textX: 200,
       textY: 200,
       canEdit: false,
-      canDelete: false
+      canDelete: false,
+      isStarterLabel: true
     };
     this.componentContent.labels.push(newLabel);
     this.componentChanged();

src/assets/wise5/components/label/label-student/label-student.component.ts

@@ -292,13 +292,26 @@ export class LabelStudent extends ComponentStudent {
       this.setStudentWork(componentState);
     } else if (this.component.hasConnectedComponent()) {
       this.handleConnectedComponents();
-      if (this.componentContent.labels != null) {
-        this.addLabelsToCanvas(componentContent.labels);
+      if (componentContent.labels != null) {
+        this.setStarterLabels(componentContent);
       }
     } else if (this.LabelService.componentStateIsSameAsStarter(componentState, componentContent)) {
       this.setStudentWork(componentState);
     } else if (componentState == null && componentContent.labels != null) {
-      this.addLabelsToCanvas(componentContent.labels);
+      this.setStarterLabels(componentContent);
+    }
+  }
+
+  private setStarterLabels(componentContent: any): void {
+    // Make sure starter labels have isStarterLabel set to true. Starter labels from old Label
+    // component content did not have this field.
+    this.setIsStarterLabelTrue(componentContent.labels);
+    this.addLabelsToCanvas(componentContent.labels);
+  }
+
+  private setIsStarterLabelTrue(labels: any[]): void {
+    for (const label of labels) {
+      label.isStarterLabel = true;
     }
   }
 
@@ -346,9 +359,14 @@ export class LabelStudent extends ComponentStudent {
     this.canvas.getObjects('i-text').forEach((object: any) => {
       labels.push(this.getLabelJSONObjectFromText(object));
     });
+    labels.sort(this.sortByTimestampAscending);
     return labels;
   }
 
+  private sortByTimestampAscending(labelA: any, labelB: any): number {
+    return labelA.timestamp - labelB.timestamp;
+  }
+
   /**
    * Get the simple JSON object that represents the label
    * @param circle a Fabric circle object
@@ -403,7 +421,9 @@ export class LabelStudent extends ComponentStudent {
       text: label.textString,
       color: label.text.backgroundColor,
       canEdit: label.canEdit,
-      canDelete: label.canDelete
+      canDelete: label.canDelete,
+      timestamp: label.timestamp,
+      isStarterLabel: label.isStarterLabel
     };
   }
 
@@ -457,6 +477,7 @@ export class LabelStudent extends ComponentStudent {
     const newLabelLocation = this.getNewLabelLocation();
     const canEdit = true;
     const canDelete = true;
+    const isStarterLabel = false;
     const newLabel = this.LabelService.createLabel(
       newLabelLocation.pointX,
       newLabelLocation.pointY,
@@ -471,7 +492,9 @@ export class LabelStudent extends ComponentStudent {
       this.componentContent.pointSize,
       this.componentContent.fontSize,
       this.componentContent.labelWidth,
-      this.studentDataVersion
+      this.studentDataVersion,
+      this.LabelService.getTimestamp(),
+      isStarterLabel
     );
     this.LabelService.addLabelToCanvas(this.canvas, newLabel, this.enableCircles);
     this.addListenersToLabel(newLabel);
@@ -830,7 +853,7 @@ export class LabelStudent extends ComponentStudent {
         this.setBackgroundImage(this.componentContent.backgroundImage);
       }
       this.unselectAll();
-      this.addLabelsToCanvas(this.componentContent.labels);
+      this.setStarterLabels(this.componentContent);
       if (this.component.hasConnectedComponent()) {
         this.handleConnectedComponents();
       }

src/assets/wise5/components/label/labelService.ts

@@ -402,6 +402,7 @@ export class LabelService extends ComponentService {
   ): any[] {
     const fabricLabels: any[] = [];
     labels.forEach((label) => {
+      const timestamp = label.timestamp ? label.timestamp : this.getTimestamp();
       const fabricLabel = this.createLabel(
         label.pointX,
         label.pointY,
@@ -416,7 +417,9 @@ export class LabelService extends ComponentService {
         pointSize,
         fontSize,
         labelWidth,
-        studentDataVersion
+        studentDataVersion,
+        timestamp,
+        label.isStarterLabel
       );
       this.addLabelToCanvas(canvas, fabricLabel, enableCircles);
       fabricLabels.push(fabricLabel);
@@ -438,7 +441,9 @@ export class LabelService extends ComponentService {
     pointSize: number = 5,
     fontSize: number = 20,
     labelWidth: number,
-    studentDataVersion: number = 2
+    studentDataVersion: number = 2,
+    timestamp: number,
+    isStarterLabel: boolean
   ): any {
     // get the position of the point
     let x1: number = pointX;
@@ -525,7 +530,9 @@ export class LabelService extends ComponentService {
       text: text,
       textString: textString,
       canEdit: canEdit,
-      canDelete: canDelete
+      canDelete: canDelete,
+      timestamp: timestamp,
+      isStarterLabel: isStarterLabel
     };
   }
 
@@ -557,4 +564,8 @@ export class LabelService extends ComponentService {
   setBackgroundImage(canvas: any, backgroundPath: string): void {
     canvas.setBackgroundImage(backgroundPath, canvas.renderAll.bind(canvas));
   }
+
+  getTimestamp(): number {
+    return new Date().getTime();
+  }
 }