From 95a004f1b440bae1ca14903bc8556ad157843553 Mon Sep 17 00:00:00 2001
From: lindsay <lindsay.kay@xeolabs.com>
Date: Mon, 3 Jul 2023 19:04:32 +0200
Subject: [PATCH] Tweak example for FaceAlignedSectionPlanesPlugin #1088

---
 ...gizmos_FaceAlignedSectionPlanesPlugin.html | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/examples/gizmos_FaceAlignedSectionPlanesPlugin.html b/examples/gizmos_FaceAlignedSectionPlanesPlugin.html
index 8c48f9a4f..77cce5b23 100644
--- a/examples/gizmos_FaceAlignedSectionPlanesPlugin.html
+++ b/examples/gizmos_FaceAlignedSectionPlanesPlugin.html
@@ -45,7 +45,10 @@
     <img class="info-icon" src="../assets/images/section_plane_icon.png"/>
     <h1>FaceAlignedSectionPlanesPlugin</h1>
     <h2>Slices models open to reveal internal structures</h2>
-    <p>This example loads an IFC2x3 BIM model, then with programmatically creates face-aligned section planes to slice it.</p>
+    <p>This example loads an IFC2x3 BIM model, then with programmatically creates face-aligned section planes
+        to slice it.</p>
+    <p>To edit the SectionPlane's position, ensure that you select it by clicking it in the
+        overview canvas, then drag vertically with mouse or touch input in the control area.</p>
     <h3>Components used</h3>
     <ul>
         <li>
@@ -78,7 +81,7 @@ <h3>Resources</h3>
     // Import the modules we need for this example
     //------------------------------------------------------------------------------------------------------------------
 
-    import {Viewer, XKTLoaderPlugin, FaceAlignedSectionPlanesPlugin} from "https://cdn.jsdelivr.net/npm/@xeokit/xeokit-sdk/dist/xeokit-sdk.es.js";
+    import {Viewer, XKTLoaderPlugin, FaceAlignedSectionPlanesPlugin} from "../dist/xeokit-sdk.es.js";
 
     //------------------------------------------------------------------------------------------------------------------
     // Create a Viewer
@@ -106,11 +109,14 @@ <h3>Resources</h3>
     const sectionPlanes = new FaceAlignedSectionPlanesPlugin(viewer, {
         overviewCanvasId: "mySectionPlanesOverviewCanvas",
         controlElementId: "mySectionPlaneControlDiv",
-        overviewVisible: true
+        overviewVisible: true,
+        dragSensitivity: 1
     });
 
+    sectionPlanes.setDragSensitivity(1); // Set sensitivity of drag and touch input
+
     //------------------------------------------------------------------------------------------------------------------
-    // Load the .xkt model and IFC metadata
+    // Load the .xkt model
     //------------------------------------------------------------------------------------------------------------------
 
     const sceneModel = xktLoader.load({
@@ -121,7 +127,7 @@ <h3>Resources</h3>
     });
 
     //------------------------------------------------------------------------------------------------------------------
-    // Create a couple of cross-section planes
+    // Create a SectionPlane
     //------------------------------------------------------------------------------------------------------------------
 
     const sectionPlane = sectionPlanes.createSectionPlane({
@@ -130,6 +136,11 @@ <h3>Resources</h3>
         dir: [0.007873527603475804, 0.007873527603475804, -0.9999380056414271]
     });
 
+    //------------------------------------------------------------------------------------------------------------------
+    // Activate the drag control element for the SectionPlane
+    //------------------------------------------------------------------------------------------------------------------
+
+
     sectionPlanes.showControl(sectionPlane.id);
 
 </script>