Skip to content

Commit

Permalink
Documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@xeolabs
xeolabs committed Nov 24, 2023
1 parent 7d25a04 commit 005545d
Show file tree
Hide file tree
Showing 17 changed files with 41,022 additions and 37,711 deletions.
Binary file added assets/images/MarqueeSelect.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
18,904 changes: 9,452 additions & 9,452 deletions docs/ast/source/extras/MarqueePicker/MarqueePicker.js.json
View file

Large diffs are not rendered by default.

9,400 changes: 4,700 additions & 4,700 deletions docs/ast/source/extras/MarqueePicker/MarqueePickerMouseControl.js.json
View file

Large diffs are not rendered by default.

9,784 changes: 4,892 additions & 4,892 deletions docs/ast/source/extras/collision/ObjectsKdTree3.js.json
View file

Large diffs are not rendered by default.

29,699 changes: 16,380 additions & 13,319 deletions docs/ast/source/viewer/scene/CameraControl/lib/controllers/PickController.js.json
View file

Large diffs are not rendered by default.

104 changes: 90 additions & 14 deletions docs/class/src/extras/MarqueePicker/MarqueePicker.js~MarqueePicker.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,13 +248,13 @@
</nav>

<div class="content" data-ice="content"><div class="header-notice">
<div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {MarqueePicker} from &apos;<span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber8">@xeokit/xeokit-sdk/src/extras/MarqueePicker/MarqueePicker.js</a></span>&apos;</code></pre></div>
<div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {MarqueePicker} from &apos;<span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber89">@xeokit/xeokit-sdk/src/extras/MarqueePicker/MarqueePicker.js</a></span>&apos;</code></pre></div>
<span data-ice="access">public</span>
<span data-ice="kind">class</span>



<span data-ice="source">| <span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber8">source</a></span></span>
<span data-ice="source">| <span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber89">source</a></span></span>
</div>

<div class="self-detail detail">
Expand All @@ -275,6 +275,82 @@ <h1 data-ice="name">MarqueePicker</h1>


<div class="description" data-ice="description"><p>Picks a <span><a href="class/src/viewer/Viewer.js~Viewer.html">Viewer</a></span>&apos;s <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s with a canvas-space 2D marquee box.</p>
<p><a href="https://xeokit.github.io/xeokit-sdk/examples/picking/#marqueePick_select"><img src="/assets/images/MarqueeSelect.gif"></a></p>
<ul>
<li>[<a href="https://xeokit.github.io/xeokit-sdk/examples/picking/#marqueePick_select">Example 1: Select Objects with Marquee</a>]</li>
<li>[<a href="https://xeokit.github.io/xeokit-sdk/examples/picking/#marqueePick_viewFit">Example 2: View-Fit Objects with Marquee</a>]</li>
</ul>
<h1 id="usage">Usage</h1><p>In the example below, we</p>
<ol>
<li>Create a <span><a href="class/src/viewer/Viewer.js~Viewer.html">Viewer</a></span>, arrange the <span><a href="class/src/viewer/scene/camera/Camera.js~Camera.html">Camera</a></span></li>
<li>Use an <span><a href="class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html">XKTLoaderPlugin</a></span> to load a BIM model,</li>
<li>Create a <span><a href="class/src/extras/collision/ObjectsKdTree3.js~ObjectsKdTree3.html">ObjectsKdTree3</a></span> to automatically index the <code>Viewer&apos;s</code> <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s for fast spatial lookup,</li>
<li>Create a <code>MarqueePicker</code> to pick <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s in the <span><a href="class/src/viewer/Viewer.js~Viewer.html">Viewer</a></span>, using the <span><a href="class/src/extras/collision/ObjectsKdTree3.js~ObjectsKdTree3.html">ObjectsKdTree3</a></span> to accelerate picking</li>
<li>Create a <span><a href="class/src/extras/MarqueePicker/MarqueePickerMouseControl.js~MarqueePickerMouseControl.html">MarqueePickerMouseControl</a></span> to perform the marquee-picking with the <code>MarqueePicker</code>, using mouse input to draw the marquee box on the <code>Viewer&apos;s</code> canvas.</li>
</ol>
<p>When the <span><a href="class/src/extras/MarqueePicker/MarqueePickerMouseControl.js~MarqueePickerMouseControl.html">MarqueePickerMouseControl</a></span> is active:</p>
<ul>
<li>Long-click, drag and release on the canvas to define a marque box that picks <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s.</li>
<li>Drag left-to-right to pick <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s that intersect the box.</li>
<li>Drag right-to-left to pick <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s that are fully inside the box.</li>
<li>On release, the <code>MarqueePicker</code> will fire a &quot;picked&quot; event with IDs of the picked <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s, if any.</li>
<li>Handling that event, we mark the <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s as selected.</li>
<li>Hold down CTRL to multi-pick.</li>
</ul>
<pre><code class="lang-javascript"><code class="source-code prettyprint">import {
Viewer,
XKTLoaderPlugin,
ObjectsKdTree3,
MarqueePicker,
MarqueePickerMouseControl
} from &quot;xeokit-sdk.es.js&quot;;

// 1

const viewer = new Viewer({
canvasId: &quot;myCanvas&quot;
});

viewer.scene.camera.eye = [14.9, 14.3, 5.4];
viewer.scene.camera.look = [6.5, 8.3, -4.1];
viewer.scene.camera.up = [-0.28, 0.9, -0.3];

// 2

const xktLoader = new XKTLoaderPlugin(viewer);

const sceneModel = xktLoader.load({
id: &quot;myModel&quot;,
src: &quot;../../assets/models/xkt/v8/ifc/HolterTower.ifc.xkt&quot;
});

// 3

const objectsKdTree3 = new ObjectsKdTree3({viewer});

// 4

const marqueePicker = new MarqueePicker({viewer, objectsKdTree3});

// 5

const marqueePickerMouseControl = new MarqueePickerMouseControl({marqueePicker});

marqueePicker.on(&quot;clear&quot;, () =&gt; {
viewer.scene.setObjectsSelected(viewer.scene.selectedObjectIds, false);
});

marqueePicker.on(&quot;picked&quot;, (objectIds) =&gt; {
viewer.scene.setObjectsSelected(objectIds, true);
});

marqueePickerMouseControl.setActive(true);</code>
</code></pre>
<h1 id="design-notes">Design Notes</h1><ul>
<li>The <span><a href="class/src/extras/collision/ObjectsKdTree3.js~ObjectsKdTree3.html">ObjectsKdTree3</a></span> can be shared with any other components that want to use it to spatially search for <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s.</li>
<li>The <span><a href="class/src/extras/MarqueePicker/MarqueePickerMouseControl.js~MarqueePickerMouseControl.html">MarqueePickerMouseControl</a></span> can be replaced with other types of controllers (i.e. touch), or used alongside them.</li>
<li>The <code>MarqueePicker</code> has no input handlers of its own, and provides an API through which to programmatically control marquee picking. By firing the &quot;picked&quot; events, <code>MarqueePicker</code> implements the <em>Blackboard Pattern</em>.</li>
</ul>
</div>


Expand Down Expand Up @@ -1175,7 +1251,7 @@ <h3 data-ice="anchor" id="instance-constructor-constructor">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber17">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber98">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1253,7 +1329,7 @@ <h3 data-ice="anchor" id="instance-member-viewer">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber29">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber110">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1300,7 +1376,7 @@ <h3 data-ice="anchor" id="instance-method-clear">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber145">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber226">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1344,7 +1420,7 @@ <h3 data-ice="anchor" id="instance-method-destroy">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber249">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber330">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1389,7 +1465,7 @@ <h3 data-ice="anchor" id="instance-method-getMarqueeVisible">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber101">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber182">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1446,7 +1522,7 @@ <h3 data-ice="anchor" id="instance-method-getPickMode">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber138">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber219">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1508,7 +1584,7 @@ <h3 data-ice="anchor" id="instance-method-pick">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber156">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber237">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1566,7 +1642,7 @@ <h3 data-ice="anchor" id="instance-method-setMarquee">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber80">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber161">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1632,7 +1708,7 @@ <h3 data-ice="anchor" id="instance-method-setMarqueeCorner1">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber58">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber139">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1692,7 +1768,7 @@ <h3 data-ice="anchor" id="instance-method-setMarqueeCorner2">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber69">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber150">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1752,7 +1828,7 @@ <h3 data-ice="anchor" id="instance-method-setMarqueeVisible">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber91">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber172">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1813,7 +1889,7 @@ <h3 data-ice="anchor" id="instance-method-setPickMode">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber115">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePicker.js.html#lineNumber196">source</a></span></span>
</span>
</h3>

Expand Down
13 changes: 7 additions & 6 deletions ...lass/src/extras/MarqueePicker/MarqueePickerMouseControl.js~MarqueePickerMouseControl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,13 +248,13 @@
</nav>

<div class="content" data-ice="content"><div class="header-notice">
<div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {MarqueePickerMouseControl} from &apos;<span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber14">@xeokit/xeokit-sdk/src/extras/MarqueePicker/MarqueePickerMouseControl.js</a></span>&apos;</code></pre></div>
<div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {MarqueePickerMouseControl} from &apos;<span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber16">@xeokit/xeokit-sdk/src/extras/MarqueePicker/MarqueePickerMouseControl.js</a></span>&apos;</code></pre></div>
<span data-ice="access">public</span>
<span data-ice="kind">class</span>



<span data-ice="source">| <span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber14">source</a></span></span>
<span data-ice="source">| <span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber16">source</a></span></span>
</div>

<div class="self-detail detail">
Expand All @@ -275,6 +275,7 @@ <h1 data-ice="name">MarqueePickerMouseControl</h1>


<div class="description" data-ice="description"><p>Controls a <span><a href="class/src/extras/MarqueePicker/MarqueePicker.js~MarqueePicker.html">MarqueePicker</a></span> with mouse input.</p>
<p>See <span><a href="class/src/extras/MarqueePicker/MarqueePicker.js~MarqueePicker.html">MarqueePicker</a></span> for usage example.</p>
<p>When the MarqueePickerMouseControl is active:</p>
<ul>
<li>Long-click, drag and release on the canvas to define a marque box that picks <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s.</li>
Expand Down Expand Up @@ -944,7 +945,7 @@ <h3 data-ice="anchor" id="instance-constructor-constructor">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber22">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber24">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1016,7 +1017,7 @@ <h3 data-ice="anchor" id="instance-method-destroy">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber169">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber171">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1060,7 +1061,7 @@ <h3 data-ice="anchor" id="instance-method-getActive">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber162">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber164">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -1116,7 +1117,7 @@ <h3 data-ice="anchor" id="instance-method-setActive">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber149">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/MarqueePicker/MarqueePickerMouseControl.js.html#lineNumber151">source</a></span></span>
</span>
</h3>

Expand Down
13 changes: 7 additions & 6 deletions docs/class/src/extras/collision/ObjectsKdTree3.js~ObjectsKdTree3.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,13 +248,13 @@
</nav>

<div class="content" data-ice="content"><div class="header-notice">
<div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {ObjectsKdTree3} from &apos;<span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber16">@xeokit/xeokit-sdk/src/extras/collision/ObjectsKdTree3.js</a></span>&apos;</code></pre></div>
<div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {ObjectsKdTree3} from &apos;<span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber18">@xeokit/xeokit-sdk/src/extras/collision/ObjectsKdTree3.js</a></span>&apos;</code></pre></div>
<span data-ice="access">public</span>
<span data-ice="kind">class</span>



<span data-ice="source">| <span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber16">source</a></span></span>
<span data-ice="source">| <span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber18">source</a></span></span>
</div>

<div class="self-detail detail">
Expand All @@ -276,6 +276,7 @@ <h1 data-ice="name">ObjectsKdTree3</h1>

<div class="description" data-ice="description"><p>Automatically indexes a <span><a href="class/src/viewer/Viewer.js~Viewer.html">Viewer</a></span>&apos;s <span><a href="class/src/viewer/scene/Entity.js~Entity.html">Entity</a></span>s in a 3D k-d tree
to support fast collision detection with 3D World-space axis-aligned boundaries (AABBs) and frustums.</p>
<p>See <span><a href="class/src/extras/MarqueePicker/MarqueePicker.js~MarqueePicker.html">MarqueePicker</a></span> for usage example.</p>
<p>An ObjectsKdTree3 is configured with a Viewer, and will then automatically
keep itself populated with k-d nodes that contain the Viewer&apos;s Entitys.</p>
<p>We can then traverse the k-d nodes, starting at <span><a href="class/src/extras/collision/ObjectsKdTree3.js~ObjectsKdTree3.html#instance-get-root">ObjectsKdTree3#root</a></span>, to find
Expand Down Expand Up @@ -449,7 +450,7 @@ <h3 data-ice="anchor" id="instance-constructor-constructor">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber25">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber27">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -528,7 +529,7 @@ <h3 data-ice="anchor" id="instance-get-root">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber56">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber58">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -574,7 +575,7 @@ <h3 data-ice="anchor" id="instance-member-viewer">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber35">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber37">source</a></span></span>
</span>
</h3>

Expand Down Expand Up @@ -620,7 +621,7 @@ <h3 data-ice="anchor" id="instance-method-destroy">
<span class="right-info">


<span data-ice="source"><span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber140">source</a></span></span>
<span data-ice="source"><span><a href="file/src/extras/collision/ObjectsKdTree3.js.html#lineNumber142">source</a></span></span>
</span>
</h3>

Expand Down
Loading

0 comments on commit 005545d

Please sign in to comment.