Skip to content

Commit

Permalink
Merge pull request #1170 from xeokit/measurements-refactor
Browse files Browse the repository at this point in the history 
Make measurements controllers pluggable
  • Loading branch information
@xeolabs
xeolabs authored Oct 11, 2023
2 parents dff8715 + f60398b commit ed57ca3
Show file tree
Hide file tree
Showing 21 changed files with 1,144 additions and 2,591 deletions.
81 changes: 81 additions & 0 deletions examples/measurement/angle_createWithMouse_nosnapping.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xeokit Example</title>
<link href="../css/pageStyle.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
<img class="info-icon" src="../../assets/images/measure_angle_icon.png"/>
<h1>AngleMeasurementPlugin with AngleMeasurementsMouseControl and PointerLens</h1>
<h2>Click on the model to create angle measurements, with vertex and edge snapping</h2>
<p>In this example, we're loading a BIM model from the file system, then creating angle measurements wherever the
user clicks on the model with the mouse.</p>
<h3>Components Used</h3>
<ul>
<li>
<a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
target="_other">Viewer</a>
</li>
<li>
<a href="../../docs/class/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js~AngleMeasurementsPlugin.html"
target="_other">AngleMeasurementsPlugin</a>
</li>
<li>
<a href="../../docs/class/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js~AngleMeasurementsMouseControl.html"
target="_other">AngleMeasurementsMouseControl</a>
</li>
<li>
<a href="../../docs/class/src/extras/PointerLens/PointerLens.js~PointerLens.html"
target="_other">PointerLens</a>
</li>
</ul>
<h3>Resources</h3>
<ul>
<li>
<a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274"
target="_other">Model source</a>
</li>
</ul>
</div>
</body>
<script type="module">

import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin, AngleMeasurementsMouseControl, PointerLens} from "../../dist/xeokit-sdk.es.js";

const viewer = new Viewer({
canvasId: "myCanvas",
dtxEnabled: true
});

viewer.camera.eye = [-3.93, 2.85, 27.01];
viewer.camera.look = [4.40, 3.72, 8.89];
viewer.camera.up = [-0.01, 0.99, 0.039];

const xktLoader = new XKTLoaderPlugin(viewer);

const sceneModel = xktLoader.load({
id: "myModel",
src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
edges: true
});

const angleMeasurements = new AngleMeasurementsPlugin(viewer);

const angleMeasurementsMouseControl = new AngleMeasurementsMouseControl(angleMeasurements, {
pointerLens : new PointerLens(viewer)
})

angleMeasurementsMouseControl.snapping = false;

angleMeasurementsMouseControl.activate();

</script>
</html>
55 changes: 22 additions & 33 deletions examples/measurement/angle_createWithMouse_snapping.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
<img class="info-icon" src="../../assets/images/measure_angle_icon.png"/>
<h1>AngleMeasurementsPlugin</h1>
<h2>Click on the model to create angle measurements, with snap-to-vertex</h2>
<h1>AngleMeasurementPlugin with AngleMeasurementsMouseControl and PointerLens</h1>
<h2>Click on the model to create angle measurements, with vertex and edge snapping</h2>
<p>In this example, we're loading a BIM model from the file system, then creating angle measurements wherever the
user clicks on the model.</p>
user clicks on the model with the mouse.</p>
<h3>Components Used</h3>
<ul>
<li>
Expand All @@ -29,8 +29,12 @@ <h3>Components Used</h3>
target="_other">AngleMeasurementsPlugin</a>
</li>
<li>
<a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
target="_other">XKTLoaderPlugin</a>
<a href="../../docs/class/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsMouseControl.js~AngleMeasurementsMouseControl.html"
target="_other">AngleMeasurementsMouseControl</a>
</li>
<li>
<a href="../../docs/class/src/extras/PointerLens/PointerLens.js~PointerLens.html"
target="_other">PointerLens</a>
</li>
</ul>
<h3>Resources</h3>
Expand All @@ -44,15 +48,13 @@ <h3>Resources</h3>
</body>
<script type="module">

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin, PointerLens} from "../../dist/xeokit-sdk.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------
import {
Viewer,
XKTLoaderPlugin,
AngleMeasurementsPlugin,
AngleMeasurementsMouseControl,
PointerLens
} from "../../dist/xeokit-sdk.es.js";

const viewer = new Viewer({
canvasId: "myCanvas",
Expand All @@ -63,17 +65,6 @@ <h3>Resources</h3>
viewer.camera.look = [4.40, 3.72, 8.89];
viewer.camera.up = [-0.01, 0.99, 0.039];

//------------------------------------------------------------------------------------------------------------------
// Vertex-snapping mode
//------------------------------------------------------------------------------------------------------------------

viewer.cameraControl.snapMode = "vertex"; // Snap to nearest vertex
viewer.cameraControl.snapRadius = 30; // 30 pixels snapping radius

//------------------------------------------------------------------------------------------------------------------
// Load a model
//------------------------------------------------------------------------------------------------------------------

const xktLoader = new XKTLoaderPlugin(viewer);

const sceneModel = xktLoader.load({
Expand All @@ -82,17 +73,15 @@ <h3>Resources</h3>
edges: true
});

//------------------------------------------------------------------------------------------------------------------
// Create an AngleMeasurementsPlugin, activate its AngleMeasuremntsControl
//------------------------------------------------------------------------------------------------------------------
const angleMeasurements = new AngleMeasurementsPlugin(viewer);

const pointerLens = new PointerLens(viewer);

const angleMeasurements = new AngleMeasurementsPlugin(viewer, {
pointerLens
const angleMeasurementsMouseControl = new AngleMeasurementsMouseControl(angleMeasurements, {
pointerLens: new PointerLens(viewer)
});

angleMeasurements.control.activate();
angleMeasurementsMouseControl.snapping = true;

angleMeasurementsMouseControl.activate();

</script>
</html>
40 changes: 27 additions & 13 deletions ...istance_createWithMouse_snapping_vbo.html → .../distance_createWithMouse_nosnapping.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,10 @@
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
<img class="info-icon" src="../../assets/images/measure_distance_icon.png"/>
<h1>DistanceMeasurementPlugin with vertex-snapping</h1>
<h2>Click on the model to create distance measurements</h2>
<h1>DistanceMeasurementPlugin with DistanceMeasurementsMouseControl and PointerLens</h1>
<h2>Click on the model to create distance measurements, with no vertex and edge snapping</h2>
<p>In this example, we're loading a BIM model from the file system, then creating distance measurements wherever the
user clicks on the model.</p>
user clicks on the model with the mouse.</p>
<h3>Components Used</h3>
<ul>
<li>
Expand All @@ -99,6 +99,14 @@ <h3>Components Used</h3>
<a href="../../docs/class/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.js~DistanceMeasurementsPlugin.html"
target="_other">DistanceMeasurementsPlugin</a>
</li>
<li>
<a href="../../docs/class/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js~DistanceMeasurementsMouseControl.html"
target="_other">DistanceMeasurementsMouseControl</a>
</li>
<li>
<a href="../../docs/class/src/extras/PointerLens/PointerLens.js~PointerLens.html"
target="_other">PointerLens</a>
</li>
<li>
<a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
target="_other">XKTLoaderPlugin</a>
Expand All @@ -119,15 +127,15 @@ <h3>Resources</h3>
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {Viewer, XKTLoaderPlugin, ContextMenu, DistanceMeasurementsPlugin} from "../../dist/xeokit-sdk.es.js";
import {Viewer, XKTLoaderPlugin, ContextMenu, DistanceMeasurementsPlugin, DistanceMeasurementsMouseControl, PointerLens} from "../../dist/xeokit-sdk.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

const viewer = new Viewer({
canvasId: "myCanvas",
dtxEnabled: false
dtxEnabled: true
});

viewer.camera.eye = [-3.93, 2.85, 27.01];
Expand Down Expand Up @@ -159,10 +167,18 @@ <h3>Resources</h3>
});

//------------------------------------------------------------------------------------------------------------------
// DistanceMeasurementsPlugin
// DistanceMeasurementsPlugin, DistanceMeasurementsMouseControl and PointerLens
//------------------------------------------------------------------------------------------------------------------

const distanceMeasurements = new DistanceMeasurementsPlugin(viewer, {});
const distanceMeasurements = new DistanceMeasurementsPlugin(viewer);

const distanceMeasurementsMouseControl = new DistanceMeasurementsMouseControl(distanceMeasurements, {
pointerLens : new PointerLens(viewer)
})

distanceMeasurementsMouseControl.snapping = false;

distanceMeasurementsMouseControl.activate();

//------------------------------------------------------------------------------------------------------------------
// Create a context menu to delete and configure measurements
Expand Down Expand Up @@ -238,10 +254,10 @@ <h3>Resources</h3>
]
});

viewer.cameraControl.on("rightClick", function (e) {
canvasContextMenu.show(e.pagePos[0], e.pagePos[1]);
e.event.preventDefault();
});
// viewer.cameraControl.on("rightClick", function (e) {
// canvasContextMenu.show(e.pagePos[0], e.pagePos[1]);
// e.event.preventDefault();
// });

//------------------------------------------------------------------------------------------------------------------
// Create an DistanceMeasurementsPlugin, activate its DistanceMeasuremntsControl
Expand All @@ -268,8 +284,6 @@ <h3>Resources</h3>
e.event.preventDefault();
});

distanceMeasurements.control.activate();

window.viewer = viewer;

</script>
Expand Down
33 changes: 21 additions & 12 deletions examples/measurement/distance_createWithMouse_snapping.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,10 +85,10 @@
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
<img class="info-icon" src="../../assets/images/measure_distance_icon.png"/>
<h1>DistanceMeasurementPlugin with vertex-snapping</h1>
<h2>Click on the model to create distance measurements</h2>
<h1>DistanceMeasurementPlugin with DistanceMeasurementsMouseControl and PointerLens</h1>
<h2>Click on the model to create distance measurements, with no vertex and edge snapping</h2>
<p>In this example, we're loading a BIM model from the file system, then creating distance measurements wherever the
user clicks on the model.</p>
user clicks on the model with the mouse.</p>
<h3>Components Used</h3>
<ul>
<li>
Expand All @@ -99,6 +99,14 @@ <h3>Components Used</h3>
<a href="../../docs/class/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.js~DistanceMeasurementsPlugin.html"
target="_other">DistanceMeasurementsPlugin</a>
</li>
<li>
<a href="../../docs/class/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsMouseControl.js~DistanceMeasurementsMouseControl.html"
target="_other">DistanceMeasurementsMouseControl</a>
</li>
<li>
<a href="../../docs/class/src/extras/PointerLens/PointerLens.js~PointerLens.html"
target="_other">PointerLens</a>
</li>
<li>
<a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
target="_other">XKTLoaderPlugin</a>
Expand All @@ -119,7 +127,7 @@ <h3>Resources</h3>
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {Viewer, XKTLoaderPlugin, ContextMenu, DistanceMeasurementsPlugin, PointerLens} from "../../dist/xeokit-sdk.es.js";
import {Viewer, XKTLoaderPlugin, ContextMenu, DistanceMeasurementsPlugin, DistanceMeasurementsMouseControl, PointerLens} from "../../dist/xeokit-sdk.es.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
Expand Down Expand Up @@ -159,14 +167,18 @@ <h3>Resources</h3>
});

//------------------------------------------------------------------------------------------------------------------
// DistanceMeasurementsPlugin
// DistanceMeasurementsPlugin, DistanceMeasurementsMouseControl and PointerLens
//------------------------------------------------------------------------------------------------------------------

const pointerLens = new PointerLens(viewer);
const distanceMeasurements = new DistanceMeasurementsPlugin(viewer);

const distanceMeasurements = new DistanceMeasurementsPlugin(viewer, {
pointerLens
});
const distanceMeasurementsMouseControl = new DistanceMeasurementsMouseControl(distanceMeasurements, {
pointerLens : new PointerLens(viewer)
})

distanceMeasurementsMouseControl.snapping = true;

distanceMeasurementsMouseControl.activate();

//------------------------------------------------------------------------------------------------------------------
// Create a context menu to delete and configure measurements
Expand Down Expand Up @@ -272,9 +284,6 @@ <h3>Resources</h3>
e.event.preventDefault();
});

distanceMeasurements.control.activate();


window.viewer = viewer;

</script>
Expand Down
Loading

0 comments on commit ed57ca3

Please sign in to comment.