diff --git a/README.md b/README.md index 38d69e0..4cf5ed2 100644 --- a/README.md +++ b/README.md @@ -73,10 +73,11 @@ Press the transform shortcut, and move your mouse. |----------|---------| | Move | `g` | | Rotate | `r` | +| Duplicate| `d` | ### Delete selected atoms -Press the ``x`` key to delete the selected atoms +Press the ``Delete`` key to delete the selected atoms ### Export edited atoms diff --git a/docs/source/edit.rst b/docs/source/edit.rst index 8342017..70b1780 100644 --- a/docs/source/edit.rst +++ b/docs/source/edit.rst @@ -1,7 +1,7 @@ ======================= -Edit the structure +Editing the structure ======================= WEAS supports editing the atoms directly in the GUI and synchronizing with the structure of the Python object. @@ -21,7 +21,7 @@ There are two methods for selecting atoms: -Move, Rotate selected atoms +Move, Rotate and Duplicate selected atoms =========================== Press the transform shortcut, and move your mouse. @@ -33,8 +33,10 @@ Press the transform shortcut, and move your mouse. +-----------+----------+ | Rotate | ``r`` | +-----------+----------+ +| Duplicate | ``d`` | ++-----------+----------+ Delete selected atoms ===================== -Press the ``x`` key to delete the selected atoms +Press the ``Delete`` key to delete the selected atoms diff --git a/js/widget.js b/js/widget.js index 10f2fa8..5152346 100644 --- a/js/widget.js +++ b/js/widget.js @@ -10,7 +10,16 @@ import "./widget.css"; function render({ model, el }) { let avr; // Declare avr here let viewerElement = document.createElement("div"); + // Stop propagation of mouse and keyboard events from the viewer to jupyter notebook + // to avoid conflicts with the notebook's keyboard shortcuts + preventEventPropagation(viewerElement); viewerElement.style.cssText = "position: relative; width: 600px; height: 400px;"; + const viewerStyle = model.get("viewerStyle"); + // set the style ortherwise use the default value + if (viewerStyle) { + viewerElement.style.width = viewerStyle.width; + viewerElement.style.height = viewerStyle.height; + } el.appendChild(viewerElement); // Function to render atoms const renderAtoms = () => { @@ -156,4 +165,11 @@ function createVolumeData(data, cell=[[1, 0, 0], [0, 1, 0], [0, 0, 1]]) { return {dims, values, cell: cell, origin: [0, 0, 0]}; } +function preventEventPropagation(element) { + const stopPropagation = (e) => e.stopPropagation(); + ["click", "keydown", "keyup", "keypress"].forEach((eventType) => { + element.addEventListener(eventType, stopPropagation, false); + }); + } + export default { render } diff --git a/src/weas_widget/__init__.py b/src/weas_widget/__init__.py index 198e6e9..f0f976a 100644 --- a/src/weas_widget/__init__.py +++ b/src/weas_widget/__init__.py @@ -37,6 +37,8 @@ class WeasWidget(anywidget.AnyWidget): vectorField = tl.List().tag(sync=True) showVectorField = tl.Bool(True).tag(sync=True) guiConfig = tl.Dict({}).tag(sync=True) + # viewer + viewerStyle = tl.Dict({}).tag(sync=True) # task js_task = tl.Dict({}).tag(sync=True) debug = tl.Bool(False).tag(sync=True)