attempting to fix global dialog issues with multiple editors - #66

TeselaGen · May 24, 2024 · 5fdb903 · 5fdb903
1 parent d1e8217
commit 5fdb903
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -39,4 +39,4 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - closes #35 [`#35`](https://github.com/TeselaGen/tg-oss/issues/35)
 - updating yarn lock [`ff41df0`](https://github.com/TeselaGen/tg-oss/commit/ff41df0b49b8051fcba084f7eaa44cf23284926d)
 - unifying the ui and ove demos [`f23237d`](https://github.com/TeselaGen/tg-oss/commit/f23237d4185830d94f362cbd1dae527ab59ad623)
-- Add example file [`79f356f`](https://github.com/TeselaGen/tg-oss/commit/79f356faac0dc5fa0afc882eccdbf9ed5f41d047)
+- reverting seq data change [`073aba6`](https://github.com/TeselaGen/tg-oss/commit/073aba63090ca69eeaa134a1efa0563aa65a9af1)
diff --git a/packages/ove/demo/src/StandaloneDemo.js b/packages/ove/demo/src/StandaloneDemo.js
@@ -487,30 +487,75 @@ export default class StandaloneDemo extends React.Component {
   }
   render() {
     const inner = (
-      <div
-        className="standaloneDemoNode"
-        style={{
-          width: "100%",
-          height: "100%",
-          zIndex: 1050,
-          flexGrow: 1
-        }}
-        ref={node => {
-          this.node = node;
-        }}
-      />
+      <>
+        <div
+          className="standaloneDemoNode"
+          style={{
+            width: "100%",
+            height: "100%",
+            zIndex: 1050,
+            flexGrow: 1
+          }}
+          ref={node => {
+            this.node = node;
+          }}
+        />
+        <div
+          className="standaloneDemoNode2"
+          style={{
+            width: "100%",
+            height: "100%",
+            zIndex: 1050,
+            flexGrow: 1
+          }}
+          ref={node => {
+            this.node2 = node;
+          }}
+        />
+      </>
     );
     const { isDialogOpen } = this.state;
     return (
       <div style={{ flexGrow: "1", display: "flex", flexDirection: "column" }}>
-        <Button
-          onClick={() => {
-            this.setState({ isDialogOpen: !isDialogOpen });
-            this.mountEditor();
-          }}
-        >
-          Open in a dialog
-        </Button>
+        <div>
+          <Button
+            onClick={() => {
+              this.setState({ isDialogOpen: !isDialogOpen });
+              this.mountEditor();
+            }}
+          >
+            Open in a dialog
+          </Button>
+          <Button
+            onClick={() => {
+              const editor2 = window.createVectorEditor(this.node2, {
+                editorName: "vector-editor2",
+                showMenuBar: true,
+                showCircularity: false
+              });
+
+              editor2.updateEditor({
+                sequenceData: {
+                  sequence: "atagatagagaggcccg",
+                  features: [
+                    {
+                      type: "misc_feature",
+                      start: 0,
+                      end: 10,
+                      id: "yourUniqueID",
+                      forward: true
+                    }
+                  ]
+                },
+                annotationsToSupport: {
+                  parts: false
+                }
+              });
+            }}
+          >
+            Open a second editor
+          </Button>
+        </div>
         {isDialogOpen ? (
           <Dialog
             style={{ width: 600 }}

diff --git a/packages/ove/package.json b/packages/ove/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ove",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "main": "./src/index.js",
   "exports": {
     ".": {

diff --git a/packages/ove/src/GlobalDialog.js b/packages/ove/src/GlobalDialog.js
@@ -39,15 +39,22 @@ const Dialogs = {
 };
 
 export function GlobalDialog(props) {
-  const { dialogOverrides = {} } = props;
-  const [uniqKey, setUniqKey] = useState();
+  const { dialogOverrides = {}, editorName } = props;
+  const [uniqKey, setUniqKeyToForceRerender] = useState();
   useEffect(() => {
     //on unmount, clear the global dialog state..
     return () => {
       hideDialog();
     };
   }, []);
-  dialogHolder.setUniqKey = setUniqKey;
+  if (
+    dialogHolder.editorName &&
+    editorName &&
+    dialogHolder.editorName !== editorName
+  ) {
+    return null;
+  }
+  dialogHolder.setUniqKeyToForceRerender = setUniqKeyToForceRerender;
   const Comp =
     dialogHolder.CustomModalComponent ||
     dialogOverrides[dialogHolder.overrideName] ||

diff --git a/packages/ove/src/GlobalDialogUtils.js b/packages/ove/src/GlobalDialogUtils.js
@@ -15,17 +15,32 @@ export function showDialog({
   if (!dialogHolder.dialogType && ModalComponent) {
     dialogHolder.dialogType = "TGCustomModal";
   }
+  // check if focused element in the dom is within a given editor and add an editor prop to the dialog
+  if (document.activeElement && document.activeElement.closest(".veEditor")) {
+    let editorName;
+    document.activeElement
+      .closest(".veEditor")
+      ?.className.split(" ")
+      .forEach(c => {
+        if (!c.trim()) return;
+        if (!c.trim().includes("veEditor")) {
+          editorName = c;
+        }
+      });
+    dialogHolder.editorName = editorName;
+  }
+
   dialogHolder.CustomModalComponent = ModalComponent;
   dialogHolder.props = props;
   dialogHolder.overrideName = overrideName;
-  dialogHolder.setUniqKey(shortid());
+  dialogHolder.setUniqKeyToForceRerender(shortid());
 }
 export function hideDialog() {
   delete dialogHolder.dialogType;
   delete dialogHolder.CustomModalComponent;
   delete dialogHolder.props;
   delete dialogHolder.overrideName;
-  dialogHolder.setUniqKey();
+  dialogHolder.setUniqKeyToForceRerender();
 }
 
 const typeToDialogType = {
@@ -57,8 +72,8 @@ export function showAddOrEditAnnotationDialog({
     annotation.strand === -1
       ? false
       : annotation.forward !== undefined
-      ? !!annotation.forward
-      : true;
+        ? !!annotation.forward
+        : true;
   showDialog({
     overrideName: `AddOrEdit${nameUpper}DialogOverride`,
     dialogType,