From 2ff29809a312743c8b6619b130016e456ab05d5f Mon Sep 17 00:00:00 2001
From: superstar54 <xingwang1991@gmail.com>
Date: Fri, 1 Mar 2024 12:07:58 +0100
Subject: [PATCH] preventEventPropagation

---
 README.md                   |  3 ++-
 docs/source/edit.rst        |  8 +++++---
 js/widget.js                | 16 ++++++++++++++++
 src/weas_widget/__init__.py |  2 ++
 4 files changed, 25 insertions(+), 4 deletions(-)

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)