diff --git a/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js b/src/plugins/AngleMeasurementsPlugin/AngleMeasurementsPlugin.js index 013cfcb56c..0b9aad727d 100644 --- 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 index 0354046b80..ab9a41a254 100644 --- 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 {