Merge pull request #2390 from concord-consortium/188072182-multiple-s…

…parrows

Add Sparrows to Points that have one

cypress/e2e/functional/tile_tests/arrow_annotation_spec.js

@@ -134,6 +134,22 @@ context('Arrow Annotations (Sparrows)', function () {
     aa.getAnnotationButtons().eq(1).click({ force: true });
     aa.getAnnotationArrows().should("have.length", 2);
 
+    // Short click on the "drag handle" of existing sparrow can create a new sparrow
+    aa.getAnnotationArrowDragHandles().should('have.length', 4);
+    aa.getAnnotationArrowDragHandles().eq(0).trigger('mousedown', { force: true });
+    aa.getAnnotationArrowDragHandles().eq(0).trigger('mouseup', { force: true });
+    aa.getPreviewArrow().should("exist");
+    aa.getAnnotationButtons().eq(2).click({ force: true });
+    aa.getAnnotationArrows().should("have.length", 3);
+    aa.getPreviewArrow().should("not.exist");
+    aa.getAnnotationDeleteButtons().eq(2).click();
+
+    // Long click or drag, however, does not create a new sparrow.
+    aa.getAnnotationArrowDragHandles().eq(3).trigger('mousedown', { force: true });
+    cy.wait(500);
+    aa.getAnnotationArrowDragHandles().eq(3).trigger('mouseup', { force: true });
+    aa.getPreviewArrow().should("not.exist");
+
     cy.log("Can select arrows");
     // Click to select
     aa.getAnnotationSparrowGroups().should("not.have.class", "selected");
@@ -231,25 +247,37 @@ context('Arrow Annotations (Sparrows)', function () {
     aa.getAnnotationSvg().click(500, 100);
     aa.getAnnotationButtons().eq(1).click(); // Second end is anchored to an object
     aa.getAnnotationArrows().should("have.length", 2);
-
     aa.getAnnotationDeleteButtons().eq(0).click();
     aa.getAnnotationDeleteButtons().eq(0).click();
+
     aa.getAnnotationSvg().click(200, 200); // Both ends free should not create an arrow
     aa.getAnnotationSvg().click(300, 100);
     aa.getAnnotationArrows().should("have.length", 0);
 
+    // Attempting to connect both ends to objects results in second end being free
+    aa.getAnnotationButtons().eq(0).click();
+    aa.getAnnotationButtons().eq(1).click(); // Just the click location is used.
+    aa.getAnnotationModeButton().click(); // exit sparrow mode
+    aa.getAnnotationArrows().should("have.length", 1);
+    drawToolTile.getEllipseDrawing().click({ force: true, scrollBehavior: false });
+    clueCanvas.clickToolbarButton('drawing', 'delete'); // delete the object under the second end; arrow should remain since it was not attached.
+    aa.getAnnotationArrows().should("have.length", 1);
+    drawToolTile.getRectangleDrawing().eq(0).click({ force: true, scrollBehavior: false });
+    clueCanvas.clickToolbarButton('drawing', 'delete'); // delete the object under the first end; arrow should be deleted.
+    aa.getAnnotationArrows().should("have.length", 0);
+
+    // put the two deleted objects back
+    drawToolTile.drawRectangle(50, 50);
+    drawToolTile.drawEllipse(200, 50);
+
     aa.getAnnotationMenuExpander().click();
     aa.getCurvedArrowToolbarButton().click();
     clueCanvas.getSelectTool().click();
 
     cy.log("Can create sparrows across two tiles");
     clueCanvas.addTile("drawing");
     drawToolTile.getDrawTile().should("have.length", 2);
-    drawToolTile.getDrawToolVector().eq(0).click();
-    drawToolTile.getDrawTile().eq(1)
-      .trigger("pointerdown", 150, 50)
-      .trigger("pointermove", 100, 150)
-      .trigger("pointerup", 100, 50);
+    drawToolTile.drawVector(100, 50, 50, 100);
     aa.getAnnotationModeButton().click();
     aa.getAnnotationButtons().should("have.length", 4);
     aa.getAnnotationButtons().first().click({ force: true });
@@ -283,7 +311,7 @@ context('Arrow Annotations (Sparrows)', function () {
 
     cy.log("Can duplicate annotations contained within one tile");
     aa.getAnnotationModeButton().click();
-    tableToolTile.getTableCell().eq(1).click();
+    tableToolTile.getTableTile().click();
     clueCanvas.getDuplicateTool().click();
     aa.getAnnotationModeButton().click(); // To force a rerender of the annotation layer
     aa.getAnnotationModeButton().click();
@@ -560,7 +588,7 @@ context('Arrow Annotations (Sparrows)', function () {
     cy.log("New annotations can be made on a recorded program");
     aa.getAnnotationModeButton().click();
     aa.getAnnotationButtons().should("have.length", 4);
-    aa.getAnnotationButtons().eq(1).click();
+    aa.getAnnotationButtons().eq(1).click({ force: true });
     aa.getAnnotationButtons().eq(3).click();
     aa.getAnnotationArrows().should("have.length", 2);
     aa.getAnnotationModeButton().click();

cypress/support/elements/tile/ArrowAnnotation.js

@@ -30,6 +30,9 @@ class ArrowAnnotation {
   getAnnotationArrows(workspaceClass) {
     return cy.get(`${wsClass(workspaceClass)} .annotation-layer .annotation-svg .arrow.foreground-arrow`);
   }
+  getAnnotationArrowDragHandles(workspaceClass) {
+    return cy.get(`${wsClass(workspaceClass)} .annotation-layer .annotation-svg .drag-handle`);
+  }
   getAnnotationBackgroundArrowPaths(workspaceClass) {
     return cy.get(`${wsClass(workspaceClass)} .annotation-layer .annotation-svg .arrow.background-arrow path`);
   }

src/components/annotations/annotation-arrow.scss

@@ -17,9 +17,14 @@
     .arrow-stem {
       stroke-opacity: 0;
       stroke-width: 11px;
+      pointer-events: none;
+
+      .annotation-layer.show-handles & {
+        pointer-events: visible;
+      }
     }
 
-    &:hover {
+    .annotation-layer.show-handles &:hover {
       .arrow-stem {
         stroke-opacity: .125;
       }

src/components/annotations/annotation-button.scss

@@ -6,7 +6,7 @@
   fill: transparent;
   position: absolute;
 
-  &:hover {
+  .annotation-layer.show-buttons &:hover {
     fill: vars.$annotation-blue-very-transparent;
     stroke: vars.$annotation-blue;
     stroke-dasharray: 2;

src/components/annotations/annotation-node.scss

@@ -9,7 +9,7 @@
     fill: rgba(0, 0, 0, 0);
   }
 
-  &:hover {
+  .annotation-layer.show-handles &:hover {
     .node-highlight{
       fill: vars.$annotation-blue-very-transparent;
     }
@@ -28,4 +28,4 @@
       fill: vars.$annotation-blue;
     }
   }
-}
+}

src/components/annotations/arrow-annotation.scss

@@ -1,119 +1,147 @@
 @use "../vars.sass";
 
-.text-object {
-  pointer-events: none;
-
-  .text-region {
-    align-items: center;
-    display: flex;
-    height: 100%;
-    justify-content: center;
-    pointer-events: none;
-    width: 100%;
-
-    .text-box {
-      background-color: white;
-      border: 2px solid vars.$annotation-blue;
-      border-radius: 10px;
-      max-width: calc(100% - 8px);
-
-      &.text-display {
-        color: vars.$annotation-blue;
+.annotation-layer {
 
-        &.default-text {
-          font-style: italic;
-        }
+  .text-object {
+    pointer-events: none;
 
-        &:hover {
-          outline: 4px solid vars.$annotation-blue-very-transparent;
-        }
+    .text-region {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      pointer-events: none;
+      width: 100%;
+
+      .text-box {
+        background-color: white;
+        border: 2px solid vars.$annotation-blue;
+        border-radius: 10px;
+        max-width: calc(100% - 8px);
+
+        &.text-display {
+          color: vars.$annotation-blue;
+
+          &.default-text {
+            font-style: italic;
+          }
 
-        &.can-edit {
           &:hover {
-            cursor: pointer;
+            outline: 4px solid vars.$annotation-blue-very-transparent;
           }
-        }
 
-        &.dragging {
-          background-color: vars.$annotation-blue;
-          color: white;
+          &.can-edit {
+            &:hover {
+              cursor: pointer;
+            }
+          }
 
-          &:hover {
-            outline: 4px solid vars.$annotation-blue-transparent;
+          &.dragging {
+            background-color: vars.$annotation-blue;
+            color: white;
+
+            &:hover {
+              outline: 4px solid vars.$annotation-blue-transparent;
+            }
           }
         }
-      }
 
-      &.text-input {
-        background-color: vars.$annotation-light-blue;
-        text-align: center;
+        &.text-input {
+          background-color: vars.$annotation-light-blue;
+          text-align: center;
+        }
       }
     }
   }
-}
-
-.drag-handle {
-  cursor: pointer;
-}
-
-.sparrow-delete-button {
-  cursor: pointer;
-  fill-opacity: 0;
 
-  .sparrow-delete-button-front {
-    // Allow hover and click to pass through to background 'highlight' element.
+  // Only allow interacting with the drag handle when we see the 'show-handles' class.
+  .drag-handle {
     pointer-events: none;
   }
 
-  .sparrow-delete-icon {
-    // Allow hover and click to pass through to background 'highlight' element.
-    pointer-events: none;
-  }
-
-  .sparrow-delete-button-highlight {
-    fill: vars.$annotation-blue;
+  &.show-handles .drag-handle {
+    cursor: pointer;
+    pointer-events: auto;
   }
 
-  .actual-sparrow.selected & {
-    .sparrow-delete-button-highlight {
-      fill-opacity: 0;
-
-      &:hover, .sparrow-delete-button:hover & {
-        fill-opacity: .125;
-      }
-    }
+  .sparrow-delete-button {
+    fill-opacity: 0;
+    pointer-events: none;
 
     .sparrow-delete-button-front {
-      fill: vars.$annotation-blue;
-      fill-opacity: 1;
+      // Allow hover and click to pass through to background 'highlight' element.
+      pointer-events: none;
     }
+
     .sparrow-delete-icon {
-      fill-opacity: 1;
+      // Allow hover and click to pass through to background 'highlight' element.
+      pointer-events: none;
     }
-  }
 
-  &:hover {
     .sparrow-delete-button-highlight {
-      fill-opacity: .125;
+      fill: vars.$annotation-blue;
     }
 
-    .sparrow-delete-button-front {
-      fill: vars.$annotation-blue;
-      fill-opacity: 1;
+    .actual-sparrow.selected & {
+      .sparrow-delete-button-highlight {
+        fill-opacity: 0;
+
+        &:hover,
+        .sparrow-delete-button:hover & {
+          fill-opacity: .125;
+        }
+      }
+
+      .sparrow-delete-button-front {
+        fill: vars.$annotation-blue;
+        fill-opacity: 1;
+      }
+
+      .sparrow-delete-icon {
+        fill-opacity: 1;
+      }
     }
 
-    .sparrow-delete-icon {
-      fill-opacity: 1;
+    &:active {
+      .sparrow-delete-button-highlight {
+        fill-opacity: .25;
+      }
+
+      .sparrow-delete-button-front {
+        fill: vars.$annotation-blue;
+        fill-opacity: 1;
+      }
+
+      .sparrow-delete-icon {
+        fill-opacity: 1;
+      }
     }
   }
 
-  &:active {
-    .sparrow-delete-button-highlight {
-      fill-opacity: .25;
+  &.show-handles .sparrow-delete-button {
+    cursor: pointer;
+    pointer-events: auto;
+
+    &:hover {
+      .sparrow-delete-button-highlight {
+        fill-opacity: .125;
+      }
+
+      .sparrow-delete-button-front {
+        fill: vars.$annotation-blue;
+        fill-opacity: 1;
+      }
+
+      .sparrow-delete-icon {
+        fill-opacity: 1;
+      }
     }
 
+  }
+
+  &.show-handles .visible-delete-button {
     .sparrow-delete-button-front {
-      fill: vars.$annotation-blue;
+      fill: vars.$annotation-half-blue;
       fill-opacity: 1;
     }
 
@@ -122,14 +150,3 @@
     }
   }
 }
-
-.visible-delete-button {
-  .sparrow-delete-button-front {
-    fill: vars.$annotation-half-blue;
-    fill-opacity: 1;
-  }
-
-  .sparrow-delete-icon {
-    fill-opacity: 1;
-  }
-}