preventEventPropagation

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

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

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 }

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)