Skip to content

Commit 6908f2a

Browse files
jourdainjourdain
committed
add picking in pure js
1 parent 3d048f3 commit 6908f2a

File tree

6 files changed

+106
-12
lines changed

6 files changed

+106
-12
lines changed

‎docs/.vitepress/theme/colors.css‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,33 @@
77
--vp-c-brand-1: #2C68C0;
88
--vp-c-brand-2: #5DAC41;
99
--vp-c-sponsor: #ccc;
10-
}
10+
}
11+
12+
.viewers-items {
13+
display: flex;
14+
flex-wrap: wrap;
15+
margin: -8px;
16+
}
17+
18+
.viewers-item {
19+
padding: 8px;
20+
width: 100%;
21+
min-height: 300px;
22+
}
23+
24+
.viewers-item > iframe {
25+
display: block;
26+
border: 1px solid var(--vp-c-bg-soft);
27+
border-radius: 12px;
28+
height: 100%;
29+
width: 100%;
30+
background-color: var(--vp-c-bg-soft);
31+
transition: border-color 0.25s, background-color 0.25s;
32+
border: none;
33+
}
34+
35+
@media (min-width: 768px) {
36+
.viewers-grid-3 {
37+
width: calc(100% / 3);
38+
}
39+
}

‎docs/guide/viewer/data.md‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,29 @@ While the viewer provides a convinient solution for sharing visualizations, it i
55
The `trame.widget.vtklocal.VtkLocal` widget provides a `save(file_name)` helper method that will ease such file creation. You can even see its usage within our trame examples. Once things stabilize, we may promote such method on the vtkObjectManager directly to ease access.
66

77
::: code-group
8-
<<< ../../../examples/trame/widget/clip.py#export{py} [Clipping]
9-
<<< ../../../examples/trame/picking/pick.py#export{py} [Picking]
8+
<<< ../../../examples/trame/widget/clip.py#export{py} [Clipping (data)]
9+
<<< ../../public/demo/viewer-starfighter.html [Clipping (html)]
10+
<<< ../../../examples/trame/picking/pick.py#export{py} [Picking (data)]
11+
<<< ../../public/demo/viewer-porsche.html [Picking (html)]
1012
:::
1113

1214
<div style="width: 100%; height: 25vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
1315
<iframe src="/vtk-wasm/demo/viewer-basic.html" style="width: 100%; height: 100%; border: none;">
1416
</iframe>
15-
</div>
17+
</div>
18+
19+
[Full Screen Viewer](/demo/viewer-basic.html)
1620

1721
<div style="width: 100%; height: 25vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
1822
<iframe src="/vtk-wasm/demo/viewer-porsche.html" style="width: 100%; height: 100%; border: none;">
1923
</iframe>
20-
</div>
24+
</div>
25+
26+
[Full Screen Viewer](/demo/viewer-porsche.html)
2127

2228
<div style="width: 100%; height: 25vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
2329
<iframe src="/vtk-wasm/demo/viewer-starfighter.html" style="width: 100%; height: 100%; border: none;">
2430
</iframe>
25-
</div>
31+
</div>
32+
33+
[Full Screen Viewer](/demo/viewer-starfighter.html)

‎docs/index.md‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,24 @@ features:
4747
width: 20
4848
details: Kitware can help you get started intergrating ParaView Catalyst into your simulation. Our team is here to help. Please contact us
4949
link: https://www.kitware.com/support
50-
- details: '<iframe src="./demo/viewer-basic.html" style="width: 100%; height: 100%; border: none"></iframe>'
51-
- details: '<iframe src="./demo/viewer-porsche.html" style="width: 100%; height: 100%; border: none"></iframe>'
52-
- details: '<iframe src="./demo/viewer-starfighter.html" style="width: 100%; height: 100%; border: none"></iframe>'
50+
# - details: '<iframe src="./demo/viewer-basic.html" style="width: 100%; height: 100%; border: none"></iframe>'
51+
# - details: '<iframe src="./demo/viewer-porsche.html" style="width: 100%; height: 100%; border: none"></iframe>'
52+
# - details: '<iframe src="./demo/viewer-starfighter.html" style="width: 100%; height: 100%; border: none"></iframe>'
5353
---
5454
<!--
5555
<div style="width: 100%; height: 50vh; border-radius: 12px; overflow: hidden; margin: 1rem 0;">
5656
<iframe src="./demo/viewer-basic.html" style="width: 100%; height: 100%; border: none;">
5757
</iframe>
58-
</div> -->
58+
</div> -->
59+
60+
<div class="viewers-items">
61+
<div class="viewers-item viewers-grid-3">
62+
<iframe src="./demo/viewer-porsche.html"></iframe>
63+
</div>
64+
<div class="viewers-item viewers-grid-3">
65+
<iframe src="./demo/viewer-basic.html"></iframe>
66+
</div>
67+
<div class="viewers-item viewers-grid-3">
68+
<iframe src="./demo/viewer-starfighter.html"></iframe>
69+
</div>
70+
</div>

‎docs/public/data/porsche.wazex‎

874 Bytes
Binary file not shown.

‎docs/public/demo/viewer-porsche.html‎

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<html>
22
<head>
3-
<script src="https://unpkg.com/@kitware/[email protected].1/dist/umd/viewer.umd.js"></script>
3+
<script src="https://unpkg.com/@kitware/[email protected].2/dist/umd/viewer.umd.js"></script>
44
</head>
55
<body style="margin:0">
66
<div id="viewer"></div>
@@ -12,7 +12,45 @@
1212
{
1313
rendering: 'webgl',
1414
},
15-
);
15+
).then((viewer) => {
16+
// ------------------------------------------------------------
17+
// enable picking in pure JS
18+
// ------------------------------------------------------------
19+
const renderWindow = viewer.remoting.getVtkObject(1);
20+
const renderer = viewer.remoting.getVtkObject(3);
21+
const property = viewer.remoting.getVtkObject(515);
22+
const picker = viewer.remoting.getVtkObject(513);
23+
const interactor = viewer.remoting.getVtkObject(509);
24+
// ------------------------------------------------------------
25+
26+
let pickingPending = false;
27+
let lastActor = null;
28+
29+
async function pick() {
30+
if (pickingPending) {
31+
return;
32+
}
33+
try {
34+
pickingPending = true;
35+
const pos = interactor.state.EventPosition;
36+
const found = await picker.Pick([...pos, 0], renderer);
37+
if (found) {
38+
if (lastActor) {
39+
(await lastActor.GetProperty()).DeepCopy(property);
40+
}
41+
lastActor = await picker.GetActor();
42+
const actorProp = await lastActor.GetProperty();
43+
await property.DeepCopy(actorProp);
44+
await actorProp.SetColor(1, 0, 1);
45+
await actorProp.EdgeVisibilityOn();
46+
}
47+
await renderWindow.Render();
48+
} finally {
49+
pickingPending = false;
50+
}
51+
}
52+
interactor.observe("MouseMoveEvent", pick);
53+
});
1654
</script>
1755
</body>
1856
</html>

‎examples/trame/picking/pick.py‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ def _build_ui(self):
9494

9595
# => push picker to client
9696
view.register_vtk_object(self.picker)
97+
view.register_vtk_object(self.last_picked_property) # for pure client edit
9798

9899
# => attach interactor listener
99100
wasm_interactor_id = view.get_wasm_id(self.interactor)
@@ -170,6 +171,12 @@ def main():
170171
app = Pick()
171172
if "--export" in sys.argv:
172173
app.ctx.wasm_view.save("porsche.wazex")
174+
# Print ids
175+
print(f"render_window:", app.ctx.wasm_view.get_wasm_id(app.render_window))
176+
print(f"renderer:", app.ctx.wasm_view.get_wasm_id(app.renderer))
177+
print(f"property:", app.ctx.wasm_view.get_wasm_id(app.last_picked_property))
178+
print(f"picker:", app.ctx.wasm_view.get_wasm_id(app.picker))
179+
print(f"interactor:", app.ctx.wasm_view.get_wasm_id(app.interactor))
173180

174181
app.server.start()
175182
# endregion export

0 commit comments

Comments
 (0)