Docs tweaks

xeokit · Dec 5, 2022 · be414e2 · be414e2
1 parent de44296
commit be414e2
Show file tree

Hide file tree

Showing 2 changed files with 152 additions and 1 deletion.
diff --git a/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js b/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js
@@ -123,6 +123,85 @@ import {AngleMeasurementsControl} from "./AngleMeasurementsControl.js";
  *
  * angleMeasurements.control.activate();  // <------------ Activate the AngleMeasurementsControl
  * ````
+ *
+ * ## Example 4: Attaching Mouse Handlers
+ *
+ * In our fourth example, we'll attach even handlers to our plugin, to catch when the user
+ * hovers or right-clicks over our measurements.
+ *
+ * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_angle_modelWithMeasurements)]
+ *
+ * ````javascript
+ * import {Viewer, XKTLoaderPlugin, AngleMeasurementsPlugin} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true
+ * });
+ *
+ * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
+ * viewer.scene.camera.look = [10.97, 5.82, -11.22];
+ * viewer.scene.camera.up = [0.36, 0.83, 0.40];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const angleMeasurements = new AngleMeasurementsPlugin(viewer);
+ *
+ * angleMeasurements.on("mouseOver", (e) => {
+ *     e.measurement.setHighlighted(true);
+ * });
+ *
+ * angleMeasurements.on("mouseLeave", (e) => {
+ *     e.measurement.setHighlighted(false);
+ * });
+ *
+ * angleMeasurements.on("contextMenu", (e) => {
+ *     // Show context menu
+ *     e.event.preventDefault();
+ * });
+ *
+ * const model = xktLoader.load({
+ *      src: "./models/xkt/duplex/duplex.xkt"
+ * });
+ *
+ * model.on("loaded", () => {
+ *
+ *       angleMeasurementsPlugin.createMeasurement({
+ *             id: "angleMeasurement1",
+ *             origin: {
+ *                 entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
+ *                 worldPos: [0.4158603637281142, 2.5193106917110457, 17.79972838299403]
+ *             },
+ *             corner: {
+ *                 entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
+ *                 worldPos: [0.41857741956197625,0.0987169929481646,17.799763071093395]
+ *             },
+ *             target: {
+ *                 entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
+ *                 worldPos: [5.235526066859247, 0.11580773869801986, 17.824891550941565]
+ *             },
+ *             visible: true
+ *         });
+ *
+ *         angleMeasurementsPlugin.createMeasurement({
+ *             id: "angleMeasurement2",
+ *             origin: {
+ *                 entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
+ *                 worldPos: [-0.00003814187850181838, 5.9996748076205115,17.79996871551525]
+ *             },
+ *             corner: {
+ *                 entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNqI"],
+ *                 worldPos: [-0.0005214119318139865, 3.1010044228517595, 17.787656604483363]
+ *
+ *             },
+ *             target: {
+ *                 entity: viewer.scene.objects["1s1jVhK8z0pgKYcr9jt7AB"],
+ *                 worldPos: [ 8.380657312957396, 3.1055697628459553, 17.799220108187185]
+ *             },
+ *             visible: true
+ *         });
+ * });
+ * ````
  */
 class AngleMeasurementsPlugin extends Plugin {
 

diff --git a/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.js b/src/plugins/DistanceMeasurementsPlugin/DistanceMeasurementsPlugin.js
@@ -9,7 +9,7 @@ import {DistanceMeasurementsControl} from "./DistanceMeasurementsControl.js";
  *
  * * [[Example 1: Model with distance measurements](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_modelWithMeasurements)]
  * * [[Example 2: Create distance measurements with mouse](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_createWithMouse)]
- * * [[Example 3: Configuring units and scale](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_unitsAndScale)]
+ * * [[Example 3: Configuring units and scale](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_unitsAndScale)
  *
  * ## Overview
  *
@@ -132,6 +132,78 @@ import {DistanceMeasurementsControl} from "./DistanceMeasurementsControl.js";
  * metrics.units = "meters";
  * metrics.scale = 10.0;
  * ````
+ *
+ * ## Example 4: Attaching Mouse Handlers
+ *
+ * In our fourth example, we'll attach even handlers to our plugin, to catch when the user
+ * hovers or right-clicks over our measurements.
+ *
+ * [[Run example](https://xeokit.github.io/xeokit-sdk/examples/#measurements_distance_modelWithMeasurements)]
+ *
+ * ````javascript
+ * import {Viewer, XKTLoaderPlugin, DistanceMeasurementsPlugin} from "xeokit-sdk.es.js";
+ *
+ * const viewer = new Viewer({
+ *     canvasId: "myCanvas",
+ *     transparent: true
+ * });
+ *
+ * viewer.scene.camera.eye = [-2.37, 18.97, -26.12];
+ * viewer.scene.camera.look = [10.97, 5.82, -11.22];
+ * viewer.scene.camera.up = [0.36, 0.83, 0.40];
+ *
+ * const xktLoader = new XKTLoaderPlugin(viewer);
+ *
+ * const distanceMeasurements = new DistanceMeasurementsPlugin(viewer);
+ *
+ * distanceMeasurements.on("mouseOver", (e) => {
+ *     e.measurement.setHighlighted(true);
+ * });
+ *
+ * distanceMeasurements.on("mouseLeave", (e) => {
+ *     e.measurement.setHighlighted(false);
+ * });
+ *
+ * distanceMeasurements.on("contextMenu", (e) => {
+ *     // Show context menu
+ *     e.event.preventDefault();
+ * });
+ *
+ * const model = xktLoader.load({
+ *      src: "./models/xkt/duplex/duplex.xkt"
+ * });
+ *
+ * model.on("loaded", () => {
+ *
+ *      const myMeasurement1 = distanceMeasurements.createMeasurement({
+ *          id: "distanceMeasurement1",
+ *          origin: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+ *              worldPos: [0.044, 5.998, 17.767]
+ *          },
+ *          target: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FLOH"],
+ *              worldPos: [4.738, 3.172, 17.768]
+ *          },
+ *          visible: true,
+ *          wireVisible: true
+ *      });
+ *
+ *      const myMeasurement2 = distanceMeasurements.createMeasurement({
+ *          id: "distanceMeasurement2",
+ *          origin: {
+ *              entity: viewer.scene.objects["2O2Fr$t4X7Zf8NOew3FNr2"],
+ *              worldPos: [0.457, 2.532, 17.766]
+ *          },
+ *          target: {
+ *              entity: viewer.scene.objects["1CZILmCaHETO8tf3SgGEXu"],
+ *              worldPos: [0.436, 0.001, 22.135]
+ *          },
+ *          visible: true,
+ *          wireVisible: true
+ *      });
+ * });
+ * ````
  */
 class DistanceMeasurementsPlugin extends Plugin {