Geometry: Select, Points, and Polygon modes

cypress/e2e/functional/document_tests/copy_doc_test_spec.js

@@ -56,10 +56,11 @@ context('Copy Document', () => {
     cy.get('.spacer').click();
     textTile.deleteTextTile();
     geometryTile.getGeometryTile().last().click();
+    clueCanvas.clickToolbarButton('geometry', 'point');
     geometryTile.addPointToGraph(5, 5);
     geometryTile.addPointToGraph(10, 5);
     geometryTile.addPointToGraph(10, 10);
-    geometryTile.getGraphPoint().should('have.length', 3);
+    geometryTile.getGraphPoint().should('have.length', 4);
 
     cy.log('Add drawing tile');
     clueCanvas.addTile("drawing");

cypress/e2e/functional/document_tests/student_teacher_4up_readonly_spec.js

@@ -83,10 +83,11 @@ function setupTest(studentIndex) {
   cy.get('.spacer').click();
   textToolTile.deleteTextTile();
   geometryToolTile.getGeometryTile().last().click();
+  clueCanvas.clickToolbarButton('geometry', 'point');
   geometryToolTile.addPointToGraph(5, 5);
   geometryToolTile.addPointToGraph(10, 5);
   geometryToolTile.addPointToGraph(10, 10);
-  geometryToolTile.getGraphPoint().should('have.length', 3);
+  geometryToolTile.getGraphPoint().should('have.length', 4); // including phantom point
   clueCanvas.addTile("drawing");
   drawToolTile.getDrawToolRectangle().click();
   drawToolTile.getDrawTile()

cypress/e2e/functional/document_tests/tiles_copy_test_spec.js

@@ -141,10 +141,11 @@ context('Test copy tiles from one document to other document', function () {
     cy.get('.spacer').click();
     textToolTile.deleteTextTile();
     geometryToolTile.getGeometryTile().last().click();
+    clueCanvas.clickToolbarButton('geometry', 'point');
     geometryToolTile.addPointToGraph(5, 5);
     geometryToolTile.addPointToGraph(10, 5);
     geometryToolTile.addPointToGraph(10, 10);
-    geometryToolTile.getGraphPoint().should('have.length', 3);
+    geometryToolTile.getGraphPoint().should('have.length', 4);
 
     cy.log('Add drawing tile');
     clueCanvas.addTile("drawing");

cypress/e2e/functional/tile_tests/arrow_annotation_spec.js

@@ -236,21 +236,23 @@ context('Arrow Annotations (Sparrows)', function () {
     aa.getAnnotationArrows().should("have.length", 4);
   });
 
-  it("can add arrows to geometry tiles", () => {
+  it("can add arrows to geometry tiles", { scrollBehavior: 'nearest'}, () => {
     beforeTest(queryParams);
     clueCanvas.addTile("geometry");
 
     cy.log("Annotation buttons appear for points, polygons, and segments");
+    clueCanvas.clickToolbarButton('geometry', 'polygon');
     aa.clickArrowToolbarButton(); // sparrow mode on
     aa.getAnnotationLayer().should("have.class", "editing");
     aa.getAnnotationButtons().should("not.exist");
+
     aa.clickArrowToolbarButton(); // sparrow mode off
-    // For some reason adding the first point is ignored, so we add four but get three to make a triangle
-    geometryToolTile.addPointToGraph(5, 5);
+    geometryToolTile.getGeometryTile().click(); // select tile
     geometryToolTile.addPointToGraph(10, 5);
     geometryToolTile.addPointToGraph(15, 10);
     geometryToolTile.addPointToGraph(20, 5);
-    geometryToolTile.getGraphPoint().last().dblclick({ force: true });
+    geometryToolTile.addPointToGraph(10, 5); // close polygon
+
     aa.clickArrowToolbarButton(); // sparrow mode on
     // 3 points + 3 segments + 1 polygon = 7
     aa.getAnnotationButtons().should("have.length", 7);
@@ -261,14 +263,16 @@ context('Arrow Annotations (Sparrows)', function () {
     aa.getAnnotationButtons().eq(6).click();
     aa.getAnnotationArrows().should("have.length", 1);
     aa.getAnnotationDeleteButtons().eq(0).click();
+
     // Remove all the points and polygons
     aa.clickArrowToolbarButton(); // sparrow mode off
+    geometryToolTile.getGeometryTile().click(); // select tile
     geometryToolTile.getGraphPoint().eq(2).click();
-    geometryToolTile.deleteGraphElement();
+    clueCanvas.clickToolbarButton('geometry', 'delete');
     geometryToolTile.getGraphPoint().eq(1).click();
-    geometryToolTile.deleteGraphElement();
+    clueCanvas.clickToolbarButton('geometry', 'delete');
     geometryToolTile.getGraphPoint().eq(0).click();
-    geometryToolTile.deleteGraphElement();
+    clueCanvas.clickToolbarButton('geometry', 'delete');
     aa.getAnnotationButtons().should("have.length", 0);
     aa.getAnnotationArrows().should("have.length", 0);
 

cypress/e2e/functional/tile_tests/geometry_tool_spec.js

@@ -29,6 +29,7 @@ context('Geometry Tool', function () {
 
     cy.log("add a point to the origin");
     clueCanvas.addTile('geometry');
+    clueCanvas.clickToolbarButton('geometry', 'point');
     geometryToolTile.addPointToGraph(0, 0);
     geometryToolTile.getGraphPointCoordinates().should('exist');
 
@@ -38,6 +39,7 @@ context('Geometry Tool', function () {
     cy.get('.spacer').click();
     textToolTile.deleteTextTile();
     geometryToolTile.getGeometryTile().last().click();
+    clueCanvas.clickToolbarButton('geometry', 'point');
     geometryToolTile.addPointToGraph(5, 5);
     geometryToolTile.addPointToGraph(10, 5);
     geometryToolTile.addPointToGraph(10, 10);
@@ -96,6 +98,62 @@ context('Geometry Tool', function () {
     geometryToolTile.getGraphPoint().should('have.length', 3);
   });
 
+  it('works in all three modes', () => {
+    beforeTest();
+    clueCanvas.addTile('geometry');
+    geometryToolTile.getGraph().should("exist");
+
+    cy.log("add points with points mode");
+    clueCanvas.clickToolbarButton('geometry', 'point');
+    clueCanvas.toolbarButtonIsSelected('geometry', 'point');
+    geometryToolTile.getGraph().trigger('mousemove');
+    geometryToolTile.getGraphPoint().should("have.length", 1); // phantom point
+    geometryToolTile.addPointToGraph(1, 1);
+    geometryToolTile.addPointToGraph(2, 2);
+    geometryToolTile.getGraphPoint().should("have.length", 3);
+
+    cy.log("select points with select mode");
+    clueCanvas.clickToolbarButton('geometry', 'select');
+    clueCanvas.toolbarButtonIsSelected('geometry', 'select');
+    geometryToolTile.getGraph().trigger('mousemove');
+    geometryToolTile.getGraphPoint().should("have.length", 2); // no phantom point
+
+    // Clicking background should NOT create a point.
+    geometryToolTile.addPointToGraph(3, 3);
+    geometryToolTile.getGraphPoint().should("have.length", 2); // same as before
+
+    geometryToolTile.getSelectedGraphPoint().should("have.length", 0);
+    // FIXME Not working.  Return to this when we update the design for selected points.
+    // cy.log("select first");
+    // geometryToolTile.selectGraphPoint(1, 1, true);
+    // geometryToolTile.getGraphPoint().eq(0).should("have.attr", "stroke", "#FF0000");
+    // geometryToolTile.getSelectedGraphPoint().should("have.length", 1);
+    // cy.log("select second");
+    // geometryToolTile.selectGraphPoint(2, 2);
+    // geometryToolTile.getSelectedGraphPoint().should("have.length", 1);
+    // cy.log("select both");
+    // geometryToolTile.selectGraphPoint(1, 1, true);
+    // geometryToolTile.getSelectedGraphPoint().should("have.length", 2);
+
+    geometryToolTile.selectGraphPoint(1, 1);
+    clueCanvas.clickToolbarButton('geometry', 'delete');
+    geometryToolTile.getGraphPoint().should("have.length", 1);
+    geometryToolTile.selectGraphPoint(2, 2);
+    clueCanvas.clickToolbarButton('geometry', 'delete');
+    geometryToolTile.getGraphPoint().should("have.length", 0);
+
+    cy.log("make a polygon with polygon mode");
+    clueCanvas.clickToolbarButton('geometry', 'polygon');
+    clueCanvas.toolbarButtonIsSelected('geometry', 'polygon');
+    geometryToolTile.getGraph().trigger('mousemove');
+    geometryToolTile.getGraphPoint().should("have.length", 1); // phantom point
+    geometryToolTile.addPointToGraph(5, 5);
+    geometryToolTile.addPointToGraph(10, 5);
+    geometryToolTile.addPointToGraph(9, 9);
+    geometryToolTile.addPointToGraph(5, 5); // click first point again to close polygon.
+    geometryToolTile.getGraphPolygon().should("have.length", 1);
+  });
+
   it('will test Geometry tile undo redo', () => {
     beforeTest();
 

cypress/support/elements/tile/GeometryToolTile.js

@@ -75,18 +75,23 @@ class GeometryToolTile {
     getGraphPoint(){
         return cy.get('.geometry-content.editable ellipse[display="inline"]');
     }
+    getSelectedGraphPoint() {
+        // TODO: when we update the design, should make this a CSS class
+        return cy.get('.geometry-content.editable ellipse[stroke="#FF0000"]');
+    }
     hoverGraphPoint(x,y){
         let transX=this.transformFromCoordinate('x', x),
         transY=this.transformFromCoordinate('y', y);
 
         this.getGraph().last()
             .trigger('mouseover',transX,transY);
     }
-    selectGraphPoint(x,y){
+    selectGraphPoint(x, y, withShiftKey = false ){
         let transX=this.transformFromCoordinate('x', x),
             transY=this.transformFromCoordinate('y', y);
 
-        this.getGraph().last().click(transX, transY, {force:true});
+        this.getGraph().last()
+          .click(transX, transY, { force:true, shiftKey: withShiftKey });
     }
     getGraphPointID(point){
          return cy.get('.geometry-content.editable ellipse').eq(point)
@@ -128,8 +133,5 @@ class GeometryToolTile {
     addComment(){
         cy.get('.single-workspace.primary-workspace .geometry-toolbar .button.comment.enabled').click();
     }
-    deleteGraphElement(){
-        cy.get('.single-workspace.primary-workspace .geometry-toolbar .button.delete.enabled').click();
-    }
 }
 export default GeometryToolTile;

dependencies-notes.md

@@ -26,7 +26,7 @@ Notes on dependencies, particularly reasons for not updating to their latest ver
 |chart.js            |2.9.4          |3.9.1         |Major version not attempted; only used by Dataflow tile, which doesn't really use it.|
 |firebase            |8.10.1         |9.9.3         |Version 9 requires substantial migration; attempted update with `compat` imports failed.|
 |immutable           |3.8.2          |4.1.0         |Major version update not attempted; only required by legacy slate versions.          |
-|jsxgraph            |1.4.4          |1.4.5         |1.4.5 broke scaled rendering, e.g. in 4-up views                                     |
+|jsxgraph            |1.4.4          |1.8.0         |1.4.5 broke scaled rendering, e.g. in 4-up views                                     |
 |mob-state-tree      |5.1.5-cc.1     |5.1.6         |We are using a concord fork which fixes a bug. Additionally latest version changes TS types for arrays which broke a number of our models.|
 |nanoid              |3.3.4          |4.0.0         |v4 switched to ESM and dependencies such as postcss break with v4                    |
 |netlify-cms-app     |2.15.72        |2.15.72       |Requires React 16 or 17. Blocks upgrade to React 18.

docs/unit-configuration.md

@@ -166,7 +166,9 @@ In addition, if shared variables are configured, adds additional buttons:
 
 Common toolbar framework. Default buttons:
 
-- `point`: sets point drawing mode
+- `select`: mode for selecting and moving objects
+- `point`: mode for creating points
+- `polygon`: mode for creating polygons
 - `upload`: allows uploading an image to display in the background
 - `duplicate`: copies the currently selected objects
 - `angle-label`: toggles labeling of an angle

src/clue/app-config.json

@@ -269,7 +269,9 @@
       },
       "geometry": {
         "tools": [
+          "select",
           "point",
+          "polygon",
           "upload",
           "duplicate",
           "angle-label",