@teselagen/ove 0.5.14 → 0.5.16

package/src/withEditorInteractions/index.js

@@ -202,7 +202,7 @@ function VectorInteractionHOC(Component /* options */) {
       });
     };
 
-    handlePaste = e => {
+    handlePaste = async e => {
       const {
         caretPosition = -1,
         selectionLayer = { start: -1, end: -1 },
@@ -248,7 +248,7 @@ function VectorInteractionHOC(Component /* options */) {
       if (!seqDataToInsert.sequence.length)
         return window.toastr.warning("Sorry no valid base pairs to paste");
 
-      insertAndSelectHelper({
+      await insertAndSelectHelper({
         seqDataToInsert,
         props: this.props
       });
@@ -344,7 +344,7 @@ function VectorInteractionHOC(Component /* options */) {
 
     handleCopy = this.handleCutOrCopy();
 
-    handleDnaInsert = ({ useEventPositioning }) => {
+    handleDnaInsert = async ({ useEventPositioning }) => {
       const {
         caretPosition = -1,
         selectionLayer = { start: -1, end: -1 },
@@ -371,8 +371,8 @@ function VectorInteractionHOC(Component /* options */) {
           selectionLayer,
           sequenceLength,
           caretPosition,
-          handleInsert: seqDataToInsert => {
-            insertAndSelectHelper({
+          handleInsert: async seqDataToInsert => {
+            await insertAndSelectHelper({
               props: this.props,
               seqDataToInsert
             });
@@ -383,7 +383,7 @@ function VectorInteractionHOC(Component /* options */) {
       }
     };
 
-    handleDnaDelete = (showToast = true) => {
+    handleDnaDelete = async (showToast = true) => {
       const {
         caretPosition = -1,
         selectionLayer = { start: -1, end: -1 },
@@ -424,11 +424,13 @@ function VectorInteractionHOC(Component /* options */) {
             isCaretAtEndOfSeq = true;
           }
         }
-        const [newSeqData] = wrappedInsertSequenceDataAtPositionOrRange(
-          {},
-          sequenceData,
-          rangeToDelete
-        );
+        const [newSeqData, { abortSeqChange }] =
+          await wrappedInsertSequenceDataAtPositionOrRange(
+            {},
+            sequenceData,
+            rangeToDelete
+          );
+        if (abortSeqChange) return;
         updateSequenceData(newSeqData);
         caretPositionUpdate(
           isCaretAtEndOfSeq
@@ -1197,7 +1199,7 @@ function getGenbankFromSelection(selectedSeqData, sequenceData) {
   };
 }
 
-const insertAndSelectHelper = ({ seqDataToInsert, props }) => {
+const insertAndSelectHelper = async ({ seqDataToInsert, props }) => {
   const {
     updateSequenceData,
     wrappedInsertSequenceDataAtPositionOrRange,
@@ -1207,31 +1209,15 @@ const insertAndSelectHelper = ({ seqDataToInsert, props }) => {
     selectionLayer,
     bpLimit
   } = props;
-
-  // sequenceData,
-  //             caretPosition,
-  //             selectionLayer
-
-  // updateSequenceData(
-  //   wrappedInsertSequenceDataAtPositionOrRange(
-  //     seqDataToInsert,
-  //     sequenceData,
-  //     caretPosition > -1 ? caretPosition : selectionLayer
-  //   )
-  // );
-
-  // const newSelectionLayerStart =
-  //   caretPosition > -1 ? caretPosition : (selectionLayer.start > selectionLayer.end ? 0 : selectionLayer.start);
-  // selectionLayerUpdate({
-  //   start: newSelectionLayerStart,
-  //   end: newSelectionLayerStart + seqDataToInsert.sequence.length - 1
-  // });
-  const [newSeqData, { maintainOriginSplit }] =
-    wrappedInsertSequenceDataAtPositionOrRange(
+  const [newSeqData, { maintainOriginSplit, abortSeqChange }] =
+    await wrappedInsertSequenceDataAtPositionOrRange(
       seqDataToInsert,
       sequenceData,
       caretPosition > -1 ? caretPosition : selectionLayer
     );
+  if (abortSeqChange) {
+    throw new Error("abortSeqChange");
+  }
   if (bpLimit) {
     if (newSeqData.sequence.length > bpLimit) {
       window.toastr.error(

package/src/withEditorProps/index.js

@@ -354,7 +354,7 @@ export default compose(
   ),
   withHandlers({
     wrappedInsertSequenceDataAtPositionOrRange: props => {
-      return (
+      return async (
         _sequenceDataToInsert,
         _existingSequenceData,
         _caretPositionOrRange,
@@ -366,12 +366,12 @@ export default compose(
           caretPositionOrRange,
           options
         } = props.beforeSequenceInsertOrDelete
-          ? props.beforeSequenceInsertOrDelete(
+          ? (await props.beforeSequenceInsertOrDelete(
               tidyUpSequenceData(_sequenceDataToInsert),
               tidyUpSequenceData(_existingSequenceData),
               _caretPositionOrRange,
               _options
-            ) || {}
+            )) || {}
           : {};
         return [
           insertSequenceDataAtPositionOrRange(
@@ -483,7 +483,7 @@ export default compose(
       caretPositionUpdate(0);
     },
 
-    handleReverseComplementSelection: props => () => {
+    handleReverseComplementSelection: props => async () => {
       const {
         sequenceData,
         updateSequenceData,
@@ -499,7 +499,7 @@ export default compose(
           range: selectionLayer
         }
       );
-      const [newSeqData] = wrappedInsertSequenceDataAtPositionOrRange(
+      const [newSeqData] = await wrappedInsertSequenceDataAtPositionOrRange(
         reversedSeqData,
         sequenceData,
         selectionLayer,
@@ -510,7 +510,7 @@ export default compose(
       updateSequenceData(newSeqData);
     },
 
-    handleComplementSelection: props => () => {
+    handleComplementSelection: props => async () => {
       const {
         sequenceData,
         updateSequenceData,
@@ -523,7 +523,7 @@ export default compose(
       const comp = getComplementSequenceAndAnnotations(sequenceData, {
         range: selectionLayer
       });
-      const [newSeqData] = wrappedInsertSequenceDataAtPositionOrRange(
+      const [newSeqData] = await wrappedInsertSequenceDataAtPositionOrRange(
         comp,
         sequenceData,
         selectionLayer,

package/style.css

@@ -9086,6 +9086,13 @@ button:not(:disabled):active {
   width: 100%;
   min-width: 170px;
 }
+.tg-select.tg-select-as-tag {
+  /* background-color: red; */
+  border-radius: 4px;
+  width: fit-content;
+  color: white;
+  border: 2px solid white;
+}
 .tg-select.tg-select-as-tag .bp3-tag.bp3-minimal.bp3-intent-primary {
   color: white !important;
 }