@teselagen/ove 0.7.3-beta.5 → 0.7.3-beta.7

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 (9) hide show
  1. package/AlignmentView/index.d.ts +0 -4
  2. package/index.cjs.js +90 -826
  3. package/index.es.js +90 -826
  4. package/index.umd.js +101 -846
  5. package/package.json +1 -2
  6. package/src/AlignmentView/index.js +83 -45
  7. package/src/withEditorInteractions/Keyboard.js +2 -2
  8. package/src/withEditorInteractions/index.js +19 -16
  9. package/withEditorInteractions/Keyboard.d.ts +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teselagen/ove",
3
- "version": "0.7.3-beta.5",
3
+ "version": "0.7.3-beta.7",
4
4
  "main": "./src/index.js",
5
5
  "exports": {
6
6
  ".": {
@@ -34,7 +34,6 @@
34
34
  "buffer": "5.7.1",
35
35
  "bufferpack": "0.0.6",
36
36
  "classnames": "^2.3.2",
37
- "clipboard": "2.0.8",
38
37
  "color": "^3.2.1",
39
38
  "combokeys": "^3.0.1",
40
39
  "copy-to-clipboard": "^3.3.1",
package/src/AlignmentView/index.js CHANGED
@@ -4,7 +4,6 @@ import {
4
4
  Droppable,
5
5
  Draggable as DndDraggable
6
6
  } from "@hello-pangea/dnd";
7
- import Clipboard from "clipboard";
8
7
  import React from "react";
9
8
  import { connect } from "react-redux";
10
9
  import {
@@ -1213,16 +1212,30 @@ export class AlignmentView extends React.Component {
1213
1212
  this.copyAllAlignmentsFastaClipboardHelper.destroy();
1214
1213
  },
1215
1214
  didMount: () => {
1216
- this.copyAllAlignmentsFastaClipboardHelper =
1217
- new Clipboard(
1218
- `.copyAllAlignmentsFastaClipboardHelper`,
1219
- {
1220
- action: "copyAllAlignmentsFasta",
1221
- text: () => {
1222
- return this.getAllAlignmentsFastaText();
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
+ );
1223
1235
  }
1224
1236
  }
1225
1237
  );
1238
+ });
1226
1239
  },
1227
1240
  onClick: () => {
1228
1241
  window.toastr.success("Selection Copied");
@@ -1238,29 +1251,42 @@ export class AlignmentView extends React.Component {
1238
1251
  this.copySpecificAlignmentFastaClipboardHelper.destroy();
1239
1252
  },
1240
1253
  didMount: () => {
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;
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
+ );
1260
1284
  }
1261
1285
  }
1262
1286
  );
1287
+ });
1263
1288
  },
1289
+
1264
1290
  onClick: () => {
1265
1291
  window.toastr.success(
1266
1292
  "Selection Copied As Fasta"
@@ -1277,28 +1303,40 @@ export class AlignmentView extends React.Component {
1277
1303
  this.copySpecificAlignmentAsPlainClipboardHelper.destroy();
1278
1304
  },
1279
1305
  didMount: () => {
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;
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
+ );
1298
1334
  }
1299
1335
  }
1300
1336
  );
1337
+ });
1301
1338
  },
1339
+
1302
1340
  onClick: () => {
1303
1341
  window.toastr.success("Selection Copied");
1304
1342
  }
package/src/withEditorInteractions/Keyboard.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { noop } from "lodash-es";
2
2
  import React from "react";
3
3
 
4
- class Clipboard extends React.Component {
4
+ class Keyboard extends React.Component {
5
5
  // static propTypes = {
6
6
  // value: PropTypes.string.isRequired
7
7
  // };
@@ -82,4 +82,4 @@ class Clipboard extends React.Component {
82
82
  }
83
83
  }
84
84
 
85
- export default Clipboard;
85
+ export default Keyboard;
package/src/withEditorInteractions/index.js CHANGED
@@ -4,7 +4,6 @@ import {
4
4
  getAminoAcidStringFromSequenceString
5
5
  } from "@teselagen/sequence-utils";
6
6
  import { getSequenceWithinRange } from "@teselagen/range-utils";
7
- import Clipboard from "clipboard";
8
7
  import { compose } from "redux";
9
8
  import {
10
9
  getReverseComplementSequenceAndAnnotations,
@@ -599,9 +598,8 @@ function VectorInteractionHOC(Component /* options */) {
599
598
  this.props;
600
599
  const { isProtein } = sequenceData;
601
600
  const makeTextCopyable = (transformFunc, className, action = "copy") => {
602
- return new Clipboard(`.${className}`, {
603
- action: () => action,
604
- text: () => {
601
+ document.querySelectorAll(`.${className}`).forEach(element => {
602
+ element.addEventListener("click", async () => {
605
603
  const { selectionLayer, editorName, store } = this.props;
606
604
  const { sequenceData, copyOptions } =
607
605
  store.getState().VectorEditor[editorName];
@@ -628,17 +626,24 @@ function VectorInteractionHOC(Component /* options */) {
628
626
  sequenceData
629
627
  );
630
628
  this.sequenceDataToCopy = sequenceDataToCopy;
631
- if (action === "copy") {
632
- document.body.addEventListener("copy", this.handleCopy);
633
- } else {
634
- document.body.addEventListener("cut", this.handleCut);
635
- }
636
- if (window.Cypress) {
637
- window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
638
- window.Cypress.seqDataToCopy = sequenceDataToCopy;
629
+
630
+ const textToCopy =
631
+ sequenceDataToCopy.textToCopy || sequenceDataToCopy.sequence;
632
+
633
+ try {
634
+ await navigator.clipboard.writeText(textToCopy);
635
+ if (action === "cut") {
636
+ // Optionally clear the original text or perform any "cut" related logic
637
+ }
638
+
639
+ if (window.Cypress) {
640
+ window.Cypress.textToCopy = sequenceDataToCopy.textToCopy;
641
+ window.Cypress.seqDataToCopy = sequenceDataToCopy;
642
+ }
643
+ } catch (err) {
644
+ console.error(`${action} failed:`, err);
639
645
  }
640
- return sequenceDataToCopy.textToCopy || sequenceDataToCopy.sequence;
641
- }
646
+ });
642
647
  });
643
648
  };
644
649
  const aaCopy = {
@@ -659,8 +664,6 @@ function VectorInteractionHOC(Component /* options */) {
659
664
  }, className);
660
665
  }
661
666
  };
662
- // TODO: maybe stop using Clipboard.js and unify clipboard handling with
663
- // a more versatile approach
664
667
  return [
665
668
  ...(readOnly || disableBpEditing
666
669
  ? []
package/withEditorInteractions/Keyboard.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { default as React } from '../../../../node_modules/react';
2
- export default Clipboard;
3
- declare class Clipboard extends React.Component<any, any, any> {
2
+ export default Keyboard;
3
+ declare class Keyboard extends React.Component<any, any, any> {
4
4
  static defaultProps: {
5
5
  className: string;
6
6
  };