Merge pull request #51 from TDT4290-group-4/dev

Sprint 2

.github/pull_request_template.md

@@ -0,0 +1,13 @@
+### Issue number
+
+Closes #
+
+### Description
+
+<!-- What does this PR do? Briefly describe the changes and their purpose. -->
+
+### Testing steps
+
+<!-- Describe how reviewers can test your changes (commands, steps, or setup instructions). -->
+
+### Screenshots (optional)

.github/workflows/main.yml

@@ -1,9 +1,13 @@
-stages:
-  - lint
+name: Prettier
 
-prettier:
-  stage: lint
-  image: node:20
-  script:
-    - npm ci
-    - npx prettier --check .
+on: [pull_request]
+jobs:
+  prettier:
+    runs-on: self-hosted
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - run: npm ci
+      - run: npx prettier --check .

.gitignore

@@ -24,4 +24,7 @@ dist-ssr
 *.sw?
 
 # Point cloud data
-/public/pointclouds/
+/public/pointclouds/
+
+# Cypress screenshots
+/cypress/screenshots/

README.md

@@ -6,7 +6,7 @@ Molloy Explorer is a 3D seabed visualization tool built with **Potree**. It allo
 
 ### Add point cloud data
 
-Place the point cloud data (in Potree format with EPSG:4978 coordinates) in `public/pointclouds/data_converted`.
+Place the point cloud data (in Potree format with EPSG:4978 coordinates) in `public/pointclouds`. Ensure the point cloud folder names match the paths specified in `src/config.js`, either by renaming the point cloud folders or by updating the paths.
 
 **Note:** Point cloud files should not be committed to Git.
 
@@ -22,6 +22,12 @@ npm install
 npm run dev
 ```
 
+Then in a new terminal run the server:
+
+```bash
+npm run server
+```
+
 Open your browser at <http://localhost:5173> to view the app.
 
 ### Build for Production
@@ -31,3 +37,29 @@ npm run build
 ```
 
 The built files will be in the `dist/` folder.
+
+## Structure
+
+### The Potree Build
+
+This application is built using Potree as a package, meaning that the potree build is used as a base layer for UI and functionality and built onto by our own code. The add-ons may use, move or manipulate objects from the potree build, referencing the objects by classname or id.
+
+### Updating Potree version
+
+To update the version of Potree that this application uses you must make a build from the official potree app and replace the build folder here with the new one. There is no guarantee that Molloy Explorer is compatible with other versions of potree. Make sure that everything works on the development server before applying this to the production server.
+
+## Cypress Testing
+
+### Run Development Server
+
+```bash
+npm run dev
+```
+
+### Run Cypress tests
+
+Then in a new terminal run the tests:
+
+```bash
+npm run test
+```

cypress.config.js

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    }
+  },
+  trashAssetsBeforeRuns: false
+})

cypress/e2e/demo.cy.js

@@ -0,0 +1,17 @@
+// This is demo test
+describe('demo test', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173/#')
+    cy.contains('Molloy Explorer')
+    cy.contains('Repeat').click()
+  })
+})
+
+describe('demo test 2', () => {
+  it('passes', () => {
+    cy.visit('http://localhost:5173/#')
+    cy.get(
+      '#elevation_gradient_scheme_selection span:nth-child(1) rect'
+    ).click()
+  })
+})

cypress/e2e/filtering.cy.js

@@ -0,0 +1,24 @@
+/**Testing whether the Accepted components excists or not  */
+describe('Accepted filtering', () => {
+  it('test accepted filter button', function () {
+    cy.visit('http://localhost:5173/#')
+    cy.get('#doAcceptedFiltering').click()
+  })
+})
+
+/**Testing whether the Elevation components excists or not  */
+describe('Elevation Control', () => {
+  it('test elevation control', function () {
+    cy.visit('http://localhost:5173/#')
+    cy.get('#btnDoElevationControl').click()
+
+    cy.get(
+      '#elevation_gradient_scheme_selection span:nth-child(8) rect'
+    ).click()
+    cy.get(
+      '#elevation_gradient_scheme_selection span:nth-child(3) rect'
+    ).click()
+
+    cy.get('#sldHeightRange').click()
+  })
+})

cypress/e2e/globeRendering.cy.js

@@ -0,0 +1,22 @@
+describe('Globe Rendering and Interaction Test', () => {
+  it('Check that the viewer is rendered correctly', () => {
+    cy.visit('http://localhost:5173/#')
+    cy.wait(6000)
+
+    cy.window().then((win) => {
+      const cv = win.cesiumViewer
+      expect(cv).to.exist
+      expect(cv.scene.globe.show).to.equal(true)
+
+      expect(cv.scene.imageryLayers.length).to.be.at.least(0)
+    })
+  })
+
+  it('Render the globe and test interactions with the globe', () => {
+    cy.visit('http://localhost:5173/#')
+    cy.wait(6000)
+
+    cy.window({ timeout: 20000 }).its('cesiumViewer').should('exist')
+    cy.get('#cesiumContainer').should('exist')
+  })
+})

cypress/e2e/measurementTool.cy.js

@@ -0,0 +1,56 @@
+describe('Measurement tool', () => {
+  it('Places the measurement point', () => {
+    cy.visit('http://localhost:5173/#')
+
+    cy.get('#tools img[data-i18n="[title]tt.point_measurement"]').click()
+    cy.get('#potree_render_area canvas[tabindex="2222"]').click()
+
+    // Verify measurement was created
+    cy.get('#scene_object_properties').should('be.visible')
+    cy.get('#g_point_body').children().should('have.length.at.least', 1)
+  })
+
+  it('Delete measurement point', function () {
+    cy.visit('http://localhost:5173/#')
+
+    cy.get('#tools img[data-i18n="[title]tt.point_measurement"]').click()
+    cy.get('#potree_render_area canvas[tabindex="2222"]').click()
+    cy.get('#scene_object_properties [name="remove"]').click()
+    cy.get('#tools img[data-i18n="[title]tt.point_measurement"]').click()
+    cy.get('#potree_render_area canvas[tabindex="2222"]').click()
+    cy.get('#g_point_body button.m-row-delete').click()
+  })
+
+  it('Copy measurement point positions', function () {
+    cy.visit('http://localhost:5173/#')
+    cy.get('#tools img[data-i18n="[title]tt.point_measurement"]').click()
+    cy.get('#potree_render_area canvas[tabindex="2222"]').click()
+    cy.get('#scene_object_properties [name="copy"]').click()
+  })
+
+  it('Switch between measurement points', function () {
+    cy.visit('http://localhost:5173/#')
+    // Create three point measurements
+    cy.get('#tools img[data-i18n="[title]tt.point_measurement"]').click()
+    cy.get('#potree_render_area canvas[tabindex="2222"]').click()
+    cy.get('#tools img[data-i18n="[title]tt.point_measurement"]').click()
+    cy.get('#potree_render_area canvas[tabindex="2222"]').click()
+    cy.get('#tools img[data-i18n="[title]tt.point_measurement"]').click()
+    cy.get('#potree_render_area canvas[tabindex="2222"]').click()
+    // Switch between the created points
+    cy.get('#g_point_body span[title="Point #2"]').click()
+    cy.get('#g_point_body div:nth-child(1)').click()
+    cy.get('#g_point_body span[title="Point #3"]').click()
+  })
+
+  it('Open and close List of Measurements ', function () {
+    cy.visit('http://localhost:5173/#')
+
+    cy.get('#tools img[data-i18n="[title]tt.point_measurement"]').click()
+    cy.get('#potree_render_area canvas[tabindex="2222"]').click()
+    cy.get('#tools img[data-i18n="[title]tt.point_measurement"]').click()
+    cy.get('#potree_render_area canvas[tabindex="2222"]').click()
+    cy.get('#measurement_items span.m-group-title').click()
+    cy.get('#measurement_items span.m-group-title').click()
+  })
+})

cypress/e2e/shadedLighting.cy.js

@@ -0,0 +1,25 @@
+describe('Shaded Lighting', () => {
+  it('Toggle the EDL checkbox on and off', () => {
+    cy.visit('http://localhost:5173/#')
+    cy.get('#chkEDLEnabled').uncheck().should('not.be.checked')
+    cy.get('#chkEDLEnabled').check().should('be.checked')
+  })
+
+  it('Change radius', function () {
+    cy.visit('http://localhost:5173/#')
+    cy.get('div.potree_container').click()
+    cy.get('#sldEDLRadius span.ui-corner-all').click()
+  })
+
+  it('Change strength', function () {
+    cy.visit('http://localhost:5173/#')
+    cy.get('#sldEDLStrength span.ui-corner-all').click()
+    cy.get('#sldEDLStrength span.ui-corner-all').click()
+  })
+
+  it('Change opacity', function () {
+    cy.visit('http://localhost:5173/#')
+    cy.get('#sldEDLOpacity span.ui-corner-all').click()
+    cy.get('#sldEDLOpacity span.ui-corner-all').click()
+  })
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'

index.html

@@ -27,7 +27,7 @@
     <link
       rel="stylesheet"
       type="text/css"
-      href="src/coordinateShowing/coordinateShowing.css"
+      href="src/CoordinateShowing/coordinateShowing.css"
     />
     <link
       rel="stylesheet"
@@ -38,6 +38,8 @@
       rel="stylesheet"
       href="/src/MeasurementControl/measurementsPanel.css"
     />
+    <link rel="stylesheet" href="/src/AnnotationControl/annotationPanel.css" />
+    <link rel="stylesheet" href="src/AcceptedFiltering/threePanels.css" />
   </head>
 
   <body>
@@ -54,7 +56,6 @@
     <script src="/build/potree/potree.js"></script>
     <script src="/libs/plasio/js/laslaz.js"></script>
     <script src="/libs/three.js/build/three.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.7.6/proj4.js"></script>
     <script src="/libs/Cesium/Cesium.js"></script>
 
     <div
@@ -70,9 +71,11 @@
     >
       <div id="potree_render_area">
         <div id="cesiumContainer"></div>
-        <div id="canvasContainer">
-          <canvas id="elevationCanvas" width="200" height="30"></canvas>
-          <canvas id="posCanvas" width="200" height="30"></canvas>
+        <div id="coordinatesContainer">
+          <p id="coordinatesHeader">Target point:</p>
+          <p id="latitude">Latitude:</p>
+          <p id="longitude">Longitude:</p>
+          <p id="elevation">Elevation:</p>
         </div>
       </div>
       <div id="potree_sidebar_container"></div>