Merge pull request #87 from Watts-Lab/dan/drag-and-drop

Drag and Drop to Reorder Stages and Elements within Timeline

cypress/e2e/reorder.cy.ts

@@ -0,0 +1,142 @@
+// npm run cypress:open
+
+describe('timeline drag and drop', () => {
+    beforeEach(() => {
+        // initial yaml treatment file
+        let yamltreatment = "name: drag_and_drop_test\nplayerCount: 1\ngameStages: []";
+
+        cy.viewport(2000, 1000, { log: false });
+        cy.visit('http://localhost:3000/editor');
+        cy.get('[data-cy="code-editor"]').clear().type(yamltreatment);
+        cy.get('[data-cy="yaml-save"]').click();
+
+        // add first stage
+        cy.get('[data-cy="add-stage-button"]').click();
+        cy.get('[data-cy="edit-stage-name-new"]').type("Stage 1");
+        cy.get('[data-cy="edit-stage-duration-new"]').type("{backspace}300");
+        cy.get('[data-cy="edit-stage-save-new"]').click();
+
+        // add element 1 in stage 1
+        cy.get('[data-cy="add-element-button-0"]').click();
+        cy.get('[data-cy="edit-element-name-0-new"]').type("Element 1");
+        cy.get('[data-cy="edit-element-type-0-new"]').select("Prompt");
+        cy.get('[data-cy="edit-element-file-0-new"]').type("projects/example/preDiscussionInstructions.md");
+        cy.get('[data-cy="edit-element-save-0-new"]').click();
+
+        // add element 2 in stage 1
+        cy.get('[data-cy="add-element-button-0"]').click();
+        cy.get('[data-cy="edit-element-name-0-new"]').type("Element 2");
+        cy.get('[data-cy="edit-element-type-0-new"]').select("Survey");
+        cy.get('[data-cy="edit-element-surveyName-0-new"]').select("TIPI");
+        cy.get('[data-cy="edit-element-save-0-new"]').click();
+
+        // add second stage
+        cy.get('[data-cy="add-stage-button"]').click();
+        cy.get('[data-cy="edit-stage-name-new"]').type("Stage 2");
+        cy.get('[data-cy="edit-stage-duration-new"]').type("{backspace}200");
+        cy.get('[data-cy="edit-stage-save-new"]').click();
+
+        cy.get('[data-cy="stage-0"]').contains("Stage 1").should("be.visible");
+        cy.get('[data-cy="stage-1"]').contains("Stage 2").should("be.visible");
+        cy.get('[data-cy="element-0-0"]').contains("Element 1").should("be.visible");
+        cy.get('[data-cy="element-0-1"]').contains("Element 2").should("be.visible");
+    });
+
+    it('allows reordering of elements within stage', () => {
+        // verify initial order
+        cy.get('[data-cy="element-0-0"]').contains("Element 1").should("be.visible");
+        cy.get('[data-cy="element-0-1"]').contains("Element 2").should("be.visible");
+        cy.get('[data-cy^="element-0-"]').should('have.length', 2);
+
+        // swap first element with second element
+        cy.get('[data-cy="element-0-0"]')
+            .focus()
+            .type(" ") // space bar selects item to move
+            .type("{downArrow}") // move element down one
+            .type(" "); // stop moving item
+
+        cy.wait(1000);
+
+        // verify new order
+        cy.get('[data-cy="element-0-0"]').contains("Element 2").should("be.visible");
+        cy.get('[data-cy="element-0-1"]').contains("Element 1").should("be.visible");
+        cy.get('[data-cy^="element-0-"]').should('have.length', 2);
+    })
+
+    it('allows reodering of stages', () => {
+        // verify initial order
+        cy.get('[data-cy="stage-0"]').contains("Stage 1").should("be.visible");
+        cy.get('[data-cy="stage-1"]').contains("Stage 2").should("be.visible");
+        cy.get('[data-cy^="stage-"]').should('have.length', 2);
+
+        // swap first stage with second stage
+        cy.get('[data-cy="stage-0"]')
+            .focus()
+            .type(" ")
+            .type("{rightArrow}") // move stage 1 to the right
+            .type(" ");
+
+        cy.wait(1000);
+
+        // verify new order
+        cy.get('[data-cy="stage-0"]').contains("Stage 2").should("be.visible");
+        cy.get('[data-cy="stage-1"]').contains("Stage 1").should("be.visible");
+        cy.get('[data-cy^="stage-"]').should('have.length', 2);
+    })
+
+    it('rejects dragging elements to invalid spots', () => {
+        // verify initial order
+        cy.get('[data-cy="element-0-0"]').contains("Element 1").should("be.visible");
+        cy.get('[data-cy="element-0-1"]').contains("Element 2").should("be.visible");
+        cy.get('[data-cy^="element-0-"]').should('have.length', 2);
+
+        // try moving first element from stage 1 to stage 2
+        cy.get('[data-cy="element-0-0"]')
+            .focus()
+            .type(" ")
+            .type("{rightArrow}")
+            .type(" ");
+
+        cy.wait(1000);
+
+        // verify that order remains the same
+        cy.get('[data-cy="element-0-0"]').contains("Element 1").should("be.visible");
+        cy.get('[data-cy="element-0-1"]').contains("Element 2").should("be.visible");
+        cy.get('[data-cy^="element-0-"]').should('have.length', 2);
+
+        // try moving second element outside of stage 1
+        cy.get('[data-cy="element-0-1"]')
+            .focus()
+            .type(" ")
+            .type("{rightArrow}")
+            .type(" ");
+
+        cy.wait(1000);
+
+        // verify that order remains the same
+        cy.get('[data-cy="element-0-0"]').contains("Element 1").should("be.visible");
+        cy.get('[data-cy="element-0-1"]').contains("Element 2").should("be.visible");
+        cy.get('[data-cy^="element-0-"]').should('have.length', 2);
+    })
+
+    it('rejects dragging stages outside of timeline', () => {
+        // verify initial order
+        cy.get('[data-cy="stage-0"]').contains("Stage 1").should("be.visible");
+        cy.get('[data-cy="stage-1"]').contains("Stage 2").should("be.visible");
+        cy.get('[data-cy^="stage-"]').should('have.length', 2);
+
+        // try dragging stage outside of timeline 
+        cy.get('[data-cy="stage-0"]')
+            .focus()
+            .type(" ")
+            .type("{upArrow}")
+            .type(" ");
+
+        cy.wait(1000);
+
+        // verify that order remains the same
+        cy.get('[data-cy="stage-0"]').contains("Stage 1").should("be.visible");
+        cy.get('[data-cy="stage-1"]').contains("Stage 2").should("be.visible");
+        cy.get('[data-cy^="stage-"]').should('have.length', 2);
+    })
+})

package.json

@@ -14,8 +14,8 @@
     "patch": "cp patchedPlayer.d.ts ./node_modules/@empirica/core/dist/player-classic-react.d.ts"
   },
   "dependencies": {
-    "@empirica/core": "^1.11.0",
-    "@hello-pangea/dnd": "^16.6.0",
+    "@empirica/core": "^1.11.6",
+    "@hello-pangea/dnd": "^17.0.0",
     "@hookform/resolvers": "^3.6.0",
     "@uiw/react-textarea-code-editor": "^2.1.9",
     "@watts-lab/surveys": "^1.13.4",

src/app/editor/components/ElementCard.tsx

@@ -34,6 +34,7 @@ export function ElementCard({
       className="card bg-base-200 shadow-md min-h-12 min-w-[10px] justify-center px-5"
       style={{ left: startTime * scale, width: scale * (endTime - startTime) }}
       data-cy={'element-' + stageIndex + '-' + elementIndex}
+      tabIndex={0}
     >
       <div>
         {Object.keys(element).map((key) => (