feat: drawing tile navigator panel (PT-185987214)

cypress/e2e/functional/document_tests/student_teacher_4up_readonly_spec.js

@@ -29,7 +29,7 @@ function testTilesNotReadOnly(tab, position) {
   cy.get('.'+tab).find(position + ' .text-tool').should('not.have.class', 'read-only');
   cy.get('.'+tab).find(position + ' .table-tool-tile').should('not.have.class', 'readonly');
   cy.get('.'+tab).find(position + ' .geometry-tool-tile').should('not.have.class', 'readonly');
-  cy.get('.'+tab).find(position + ' .drawing-tool').should('not.have.class', 'read-only');
+  cy.get('.'+tab).find(position + ' .drawing-tool').not('[data-testid="tile-navigator"] .drawing-tool').should('not.have.class', 'read-only');
   cy.get('.'+tab).find(position + ' .image-tool').should('not.have.class', 'read-only');
   cy.get('.'+tab).find(position + ' .numberline-tool-tile').should('not.have.class', 'readonly');
   cy.get('.'+tab).find(position + ' .data-card-tool-tile').should('not.have.class', 'readonly');
@@ -46,7 +46,7 @@ function testTilesReadOnly(tab, position) {
   cy.get('.'+tab).find(position + ' .text-tool').should('have.class', 'read-only');
   cy.get('.'+tab).find(position + ' .table-tool-tile').should('have.class', 'readonly');
   cy.get('.'+tab).find(position + ' .geometry-tool-tile').should('have.class', 'readonly');
-  cy.get('.'+tab).find(position + ' .drawing-tool').should('have.class', 'read-only');
+  cy.get('.'+tab).find(position + ' .drawing-tool').not('[data-testid="tile-navigator"] .drawing-tool').should('have.class', 'read-only');
   cy.get('.'+tab).find(position + ' .image-tool').should('have.class', 'read-only');
   cy.get('.'+tab).find(position + ' .numberline-tool-tile').should('have.class', 'readonly');
   cy.get('.'+tab).find(position + ' .data-card-tool-tile').should('have.class', 'readonly');

cypress/e2e/functional/tile_tests/diagram_tool_spec.js

@@ -192,7 +192,7 @@ context('Diagram Tool Tile', function () {
 
     // Draw tile and toolbar buttons render
     drawTile.getDrawTile().should("exist");
-    drawTile.getDrawTile().click();
+    drawTile.getDrawTile().first().click();
     drawTile.getDrawToolNewVariable().should("exist").should("be.enabled");
     drawTile.getDrawToolEditVariable().should("exist").should("be.disabled");
     drawTile.getDrawToolInsertVariable().should("exist").should("be.disabled");

cypress/e2e/functional/tile_tests/drawing_tool_spec.js

@@ -1,11 +1,13 @@
 import ClueCanvas from '../../../support/elements/common/cCanvas';
 import DrawToolTile from '../../../support/elements/tile/DrawToolTile';
 import ImageToolTile from '../../../support/elements/tile/ImageToolTile';
+import TileNavigator from "../../../support/elements/tile/TileNavigator";
 import { LogEventName } from '../../../../src/lib/logger-types';
 
-let clueCanvas = new ClueCanvas,
-  drawToolTile = new DrawToolTile;
+const clueCanvas = new ClueCanvas;
+const drawToolTile = new DrawToolTile;
 const imageToolTile = new ImageToolTile;
+const tileNavigator = new TileNavigator;
 
 function beforeTest() {
   const queryParams = `${Cypress.config("qaUnitStudent5")}`;
@@ -563,8 +565,8 @@ context('Draw Tool Tile', function () {
     drawToolTile.getDrawTile()
       .trigger("pointerdown", 150, 150)
       .trigger("pointerup", 150, 150);
-    drawToolTile.getTextDrawing().get('textarea').type("The five boxing wizards jump quickly.{enter}");
-    drawToolTile.getTextDrawing().get('text tspan').should("exist").and("have.length", 7);
+    drawToolTile.getTextDrawing().find('textarea').type("The five boxing wizards jump quickly.{enter}");
+    drawToolTile.getTextDrawing().find('text tspan').should("exist").and("have.length", 5);
 
     cy.log("deletes text object");
     drawToolTile.getDrawToolSelect().click();

cypress/e2e/functional/tile_tests/tile_navigator_spec.js

@@ -0,0 +1,73 @@
+import ClueCanvas from "../../../support/elements/common/cCanvas";
+import TileNavigator from "../../../support/elements/tile/TileNavigator";
+import DrawToolTile from "../../../support/elements/tile/DrawToolTile";
+import { LogEventName } from "../../../../src/lib/logger-types";
+
+let clueCanvas = new ClueCanvas,
+    drawToolTile = new DrawToolTile,
+    tileNavigator = new TileNavigator;
+
+function beforeTest() {
+  const queryParams = `${Cypress.config("qaUnitStudent5")}`;
+  cy.visit(queryParams);
+  cy.waitForLoad();
+  cy.showOnlyDocumentWorkspace();
+}
+
+context("Tile Navigator", () => {
+  it("renders with a draw tool tile by default", () => {
+    beforeTest();
+
+    clueCanvas.addTile("drawing");
+    drawToolTile.getDrawTile().should("exist");
+    tileNavigator.getTileNavigator().should("exist");
+
+    clueCanvas.toolbarButtonIsEnabled("drawing", "navigator");
+    clueCanvas.getToolbarButtonToolTip("drawing", "navigator").should("exist");
+    clueCanvas.getToolbarButtonToolTipText("drawing", "navigator").should("eq", "Hide Navigator");
+
+    cy.log("Draw a rectangle");
+    drawToolTile.drawRectangle(100, 50, 20, 20);
+    tileNavigator.getRectangleDrawing().should("exist").and("have.length", 1);
+  });
+  it("can be hidden and shown", () => {
+    beforeTest();
+
+    cy.window().then(win => {
+      cy.stub(win.ccLogger, "log").as("log");
+    });
+
+    clueCanvas.addTile("drawing");
+    cy.log("Hide tile navigator");
+    clueCanvas.clickToolbarButton("drawing", "navigator");
+    clueCanvas.getToolbarButtonToolTipText("drawing", "navigator").should("eq", "Show Navigator");
+    tileNavigator.getTileNavigator().should("not.exist");
+    cy.get("@log")
+      .should("have.been.been.calledWith", LogEventName.DRAWING_TOOL_CHANGE, Cypress.sinon.match.object)
+      .its("lastCall.args.1").should("deep.include", { operation: "hideNavigator" });
+
+    cy.log("Show tile navigator");
+    clueCanvas.clickToolbarButton("drawing", "navigator");
+    clueCanvas.getToolbarButtonToolTipText("drawing", "navigator").should("eq", "Hide Navigator");
+    tileNavigator.getTileNavigator().should("exist");
+    cy.get("@log")
+      .should("have.been.been.calledWith", LogEventName.DRAWING_TOOL_CHANGE, Cypress.sinon.match.object)
+      .its("lastCall.args.1").should("deep.include", { operation: "showNavigator" });
+  });
+  it("is at the bottom of the drawing tile by default but can be moved to the top", () => {
+    beforeTest();
+
+    clueCanvas.addTile("drawing");
+    tileNavigator.getTileNavigator().should("exist").and("not.have.class", "top");
+
+    cy.log("Move tile navigator to the top of the drawing tile in a quick animation");
+    tileNavigator.getTileNavigatorPlacementButton().click();
+    cy.wait(300);
+    tileNavigator.getTileNavigatorContainer().should("have.class", "top");
+
+    cy.log("Move tile navigator to the bottom of the drawing tile in a quick animation");
+    tileNavigator.getTileNavigatorPlacementButton().click();
+    cy.wait(300);
+    tileNavigator.getTileNavigatorContainer().should("not.have.class", "top");
+  });
+});

cypress/support/elements/common/cCanvas.js

@@ -452,6 +452,25 @@ class ClueCanvas {
       });
     }
 
+    /**
+     * Locate a requested toolbar button's tooltip element.
+     * @param {*} tileType string name of the tile
+     * @param {*} buttonName string name of the button
+     */
+    getToolbarButtonToolTip(tileType, buttonName) {
+      return cy.root().find(`[data-test=canvas] .tile-toolbar.${tileType}-toolbar .toolbar-button.${buttonName}`)
+                      .parent()
+                      .filter('[data-tooltipped]');
+    }
+
+    /**
+     * Locate a requested toolbar button's tooltip element and return its text value
+     * @param {*} tileType string name of the tile
+     * @param {*} buttonName string name of the button
+     */
+    getToolbarButtonToolTipText(tileType, buttonName) {
+      return this.getToolbarButtonToolTip(tileType, buttonName).invoke('attr', 'data-original-title');
+    }
 }
 
 export default ClueCanvas;

cypress/support/elements/tile/DrawToolTile.js

@@ -6,10 +6,11 @@ class DrawToolTile{
       return cy.get(`${workspaceClass || ".primary-workspace"} .editable-tile-title-text`);
     }
     getDrawTileComponent(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool]');
+      return cy.get('.primary-workspace [data-testid=drawing-tool]')
+               .not('[data-testid=tile-navigator] [data-testid=drawing-tool]');
     }
     getDrawTileObjectCanvas(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .object-canvas');
+      return this.getDrawTileComponent().find('.object-canvas');
     }
     getDrawTileShowSortPanel(){
       return cy.get('.primary-workspace .drawing-tool .object-list');
@@ -79,37 +80,38 @@ class DrawToolTile{
     }
 
     getFreehandDrawing(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer svg path');
+      return this.getDrawTileComponent().find('.drawing-layer svg path');
     }
     getVectorDrawing(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer svg g.vector');
+      return this.getDrawTileComponent().find('.drawing-layer svg g.vector');
     }
     getRectangleDrawing(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer svg rect.rectangle');
+      return this.getDrawTileComponent().find('.drawing-layer svg rect.rectangle');
     }
     getEllipseDrawing(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer svg ellipse');
+      return this.getDrawTileComponent().find('.drawing-layer svg ellipse');
     }
     getImageDrawing(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer svg image');
+      return this.getDrawTileComponent().find('.drawing-layer svg image');
     }
     getTextDrawing(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer svg g.text');
+      return this.getDrawTileComponent().find('.drawing-layer svg g.text');
     }
     getSelectionBox(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer svg [data-testid=selection-box]');
+      return this.getDrawTileComponent().find('.drawing-layer svg [data-testid=selection-box]');
     }
     getHighlightBox(){
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer svg [data-testid=highlight-box]');
+      return this.getDrawTileComponent().find('.drawing-layer svg [data-testid=highlight-box]');
     }
     getVariableChip() {
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer .drawing-variable.variable-chip');
+      return this.getDrawTileComponent().find('.drawing-layer .drawing-variable.variable-chip');
     }
     getGhostGroup() {
-      return cy.get('.primary-workspace [data-testid=drawing-tool] .drawing-layer svg g.ghost');
+      return this.getDrawTileComponent().find('.drawing-layer svg g.ghost');
     }
     getDrawTileTitle(workspaceClass){
-      return cy.get(`${workspaceClass || ".primary-workspace"} .drawing-tool-tile .editable-tile-title`);
+      return cy.get(`${workspaceClass || ".primary-workspace"} .drawing-tool-tile .editable-tile-title`)
+               .not('[data-testid=tile-navigator] .editable-tile-title');
     }
     drawRectangle(x, y, width=25, height=25) {
       this.getDrawToolRectangle().last().click();

cypress/support/elements/tile/TileNavigator.js

@@ -0,0 +1,16 @@
+class TileNavigator {
+  getTileNavigator() {
+    return cy.get('.primary-workspace [data-testid=tile-navigator]');
+  }
+  getTileNavigatorContainer() {
+    return cy.get('.primary-workspace [data-testid=tile-navigator-container]');
+  }
+  getTileNavigatorPlacementButton() {
+    return cy.get('.primary-workspace [data-testid=tile-navigator-placement-button]');
+  }
+  getRectangleDrawing(){
+    return cy.get('.primary-workspace [data-testid=tile-navigator-container] .drawing-layer svg rect.rectangle');
+  }
+}
+
+export default TileNavigator;

src/clue/app-config.json

@@ -293,6 +293,7 @@
           "zoom-in",
           "zoom-out",
           "fit-all",
+          "navigator",
           "|",
           "duplicate",
           "delete"

src/components/tiles/tile-component.tsx

@@ -78,6 +78,7 @@ export interface IRegisterTileApiProps {
 
 export interface ITileProps extends ITileBaseProps, IRegisterTileApiProps {
   tileElt: HTMLElement | null;
+  navigatorAllowed?: boolean;
 }
 
 interface IProps extends ITileBaseProps {