@teselagen/ove 0.7.3 → 0.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/AlignmentView/index.d.ts +4 -0
  2. package/index.cjs.js +726 -95
  3. package/index.es.js +726 -95
  4. package/index.umd.js +735 -86
  5. package/package.json +2 -1
  6. package/src/AlignmentView/index.js +45 -83
  7. package/src/withEditorInteractions/index.js +13 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teselagen/ove",
3
- "version": "0.7.3",
3
+ "version": "0.7.4",
4
4
  "main": "./src/index.js",
5
5
  "exports": {
6
6
  ".": {
@@ -34,6 +34,7 @@
34
34
  "buffer": "5.7.1",
35
35
  "bufferpack": "0.0.6",
36
36
  "classnames": "^2.3.2",
37
+ "clipboard": "2.0.11",
37
38
  "color": "^3.2.1",
38
39
  "combokeys": "^3.0.1",
39
40
  "copy-to-clipboard": "^3.3.1",
package/src/AlignmentView/index.js CHANGED
@@ -4,6 +4,7 @@ import {
4
4
  Droppable,
5
5
  Draggable as DndDraggable
6
6
  } from "@hello-pangea/dnd";
7
+ import Clipboard from "clipboard";
7
8
  import React from "react";
8
9
  import { connect } from "react-redux";
9
10
  import {
@@ -1212,30 +1213,16 @@ export class AlignmentView extends React.Component {
1212
1213
  this.copyAllAlignmentsFastaClipboardHelper.destroy();
1213
1214
  },
1214
1215
  didMount: () => {
1215
- const elements = document.querySelectorAll(
1216
- `.copyAllAlignmentsFastaClipboardHelper`
1217
- );
1218
-
1219
- elements.forEach(element => {
1220
- element.addEventListener(
1221
- "click",
1222
- async () => {
1223
- const textToCopy =
1224
- this.getAllAlignmentsFastaText();
1225
-
1226
- try {
1227
- await navigator.clipboard.writeText(
1228
- textToCopy
1229
- );
1230
- } catch (err) {
1231
- console.error(
1232
- "Failed to copy text:",
1233
- err
1234
- );
1216
+ this.copyAllAlignmentsFastaClipboardHelper =
1217
+ new Clipboard(
1218
+ `.copyAllAlignmentsFastaClipboardHelper`,
1219
+ {
1220
+ action: "copyAllAlignmentsFasta",
1221
+ text: () => {
1222
+ return this.getAllAlignmentsFastaText();
1235
1223
  }
1236
1224
  }
1237
1225
  );
1238
- });
1239
1226
  },
1240
1227
  onClick: () => {
1241
1228
  window.toastr.success("Selection Copied");
@@ -1251,42 +1238,29 @@ export class AlignmentView extends React.Component {
1251
1238
  this.copySpecificAlignmentFastaClipboardHelper.destroy();
1252
1239
  },
1253
1240
  didMount: () => {
1254
- const elements = document.querySelectorAll(
1255
- `.copySpecificAlignmentFastaClipboardHelper`
1256
- );
1257
-
1258
- elements.forEach(element => {
1259
- element.addEventListener(
1260
- "click",
1261
- async () => {
1262
- const { selectionLayer } =
1263
- this.props.store.getState()
1264
- .VectorEditor.__allEditorsOptions
1265
- .alignments[this.props.id] || {};
1266
-
1267
- const seqDataToCopy =
1268
- getSequenceDataBetweenRange(
1269
- alignmentData,
1270
- selectionLayer
1271
- ).sequence;
1272
-
1273
- const seqDataToCopyAsFasta = `>${name}\r\n${seqDataToCopy}\r\n`;
1274
-
1275
- try {
1276
- await navigator.clipboard.writeText(
1277
- seqDataToCopyAsFasta
1278
- );
1279
- } catch (err) {
1280
- console.error(
1281
- "Failed to copy text:",
1282
- err
1283
- );
1241
+ this.copySpecificAlignmentFastaClipboardHelper =
1242
+ new Clipboard(
1243
+ `.copySpecificAlignmentFastaClipboardHelper`,
1244
+ {
1245
+ action: "copySpecificAlignmentFasta",
1246
+ text: () => {
1247
+ const { selectionLayer } =
1248
+ this.props.store.getState()
1249
+ .VectorEditor
1250
+ .__allEditorsOptions.alignments[
1251
+ this.props.id
1252
+ ] || {};
1253
+ const seqDataToCopy =
1254
+ getSequenceDataBetweenRange(
1255
+ alignmentData,
1256
+ selectionLayer
1257
+ ).sequence;
1258
+ const seqDataToCopyAsFasta = `>${name}\r\n${seqDataToCopy}\r\n`;
1259
+ return seqDataToCopyAsFasta;
1284
1260
  }
1285
1261
  }
1286
1262
  );
1287
- });
1288
1263
  },
1289
-
1290
1264
  onClick: () => {
1291
1265
  window.toastr.success(
1292
1266
  "Selection Copied As Fasta"
@@ -1303,40 +1277,28 @@ export class AlignmentView extends React.Component {
1303
1277
  this.copySpecificAlignmentAsPlainClipboardHelper.destroy();
1304
1278
  },
1305
1279
  didMount: () => {
1306
- const elements = document.querySelectorAll(
1307
- `.copySpecificAlignmentAsPlainClipboardHelper`
1308
- );
1309
-
1310
- elements.forEach(element => {
1311
- element.addEventListener(
1312
- "click",
1313
- async () => {
1314
- const { selectionLayer } =
1315
- this.props.store.getState()
1316
- .VectorEditor.__allEditorsOptions
1317
- .alignments[this.props.id] || {};
1318
-
1319
- const seqDataToCopy =
1320
- getSequenceDataBetweenRange(
1321
- alignmentData,
1322
- selectionLayer
1323
- ).sequence;
1324
-
1325
- try {
1326
- await navigator.clipboard.writeText(
1327
- seqDataToCopy
1328
- );
1329
- } catch (err) {
1330
- console.error(
1331
- "Failed to copy text:",
1332
- err
1333
- );
1280
+ this.copySpecificAlignmentAsPlainClipboardHelper =
1281
+ new Clipboard(
1282
+ `.copySpecificAlignmentAsPlainClipboardHelper`,
1283
+ {
1284
+ action: "copySpecificAlignmentFasta",
1285
+ text: () => {
1286
+ const { selectionLayer } =
1287
+ this.props.store.getState()
1288
+ .VectorEditor
1289
+ .__allEditorsOptions.alignments[
1290
+ this.props.id
1291
+ ] || {};
1292
+ const seqDataToCopy =
1293
+ getSequenceDataBetweenRange(
1294
+ alignmentData,
1295
+ selectionLayer
1296
+ ).sequence;
1297
+ return seqDataToCopy;
1334
1298
  }
1335
1299
  }
1336
1300
  );
1337
- });
1338
1301
  },
1339
-
1340
1302
  onClick: () => {
1341
1303
  window.toastr.success("Selection Copied");
1342
1304
  }
package/src/withEditorInteractions/index.js CHANGED
@@ -4,6 +4,7 @@ import {
4
4
  getAminoAcidStringFromSequenceString
5
5
  } from "@teselagen/sequence-utils";
6
6
  import { getSequenceWithinRange } from "@teselagen/range-utils";
7
+ import Clipboard from "clipboard";
7
8
  import { compose } from "redux";
8
9
  import {
9
10
  getReverseComplementSequenceAndAnnotations,
@@ -598,8 +599,14 @@ function VectorInteractionHOC(Component /* options */) {
598
599
  this.props;
599
600
  const { isProtein } = sequenceData;
600
601
  const makeTextCopyable = (transformFunc, className, action = "copy") => {
601
- document.querySelectorAll(`.${className}`).forEach(element => {
602
- element.addEventListener("click", async () => {
602
+ return new Clipboard(`.${className}`, {
603
+ action: () => action,
604
+ text: () => {
605
+ if (action === "copy") {
606
+ document.body.addEventListener("copy", this.handleCopy);
607
+ } else {
608
+ document.body.addEventListener("cut", this.handleCut);
609
+ }
603
610
  const { editorName, store } = this.props;
604
611
  const { sequenceData, copyOptions, selectionLayer } =
605
612
  store.getState().VectorEditor[editorName];
@@ -621,36 +628,20 @@ function VectorInteractionHOC(Component /* options */) {
621
628
  }
622
629
  }
623
630
  );
624
-
625
631
  const sequenceDataToCopy = transformFunc(
626
632
  selectedSeqData,
627
633
  sequenceData
628
634
  );
629
635
  this.sequenceDataToCopy = sequenceDataToCopy;
630
636
 
631
- const textToCopy =
632
- sequenceDataToCopy.textToCopy || sequenceDataToCopy.sequence;
633
-
634
- try {
635
- await navigator.clipboard.writeText(textToCopy);
636
- } catch (err) {
637
- console.error("Failed to copy text:", err);
638
- }
639
-
640
- if (action === "copy") {
641
- document.body.addEventListener("copy", this.handleCopy);
642
- } else {
643
- document.body.addEventListener("cut", this.handleCut);
644
- }
645
-
646
637
  if (window.Cypress) {
647
638
  window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
648
639
  window.Cypress.seqDataToCopy = sequenceDataToCopy;
649
640
  }
650
- });
641
+ return sequenceDataToCopy.textToCopy || sequenceDataToCopy.sequence;
642
+ }
651
643
  });
652
644
  };
653
-
654
645
  const aaCopy = {
655
646
  text: "Copy AA Sequence",
656
647
  className: "openVeCopyAA",
@@ -669,6 +660,8 @@ function VectorInteractionHOC(Component /* options */) {
669
660
  }, className);
670
661
  }
671
662
  };
663
+ // TODO: maybe stop using Clipboard.js and unify clipboard handling with
664
+ // a more versatile approach
672
665
  return [
673
666
  ...(readOnly || disableBpEditing
674
667
  ? []