@rnacanvas/code 1.5.0 → 1.6.1
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.
- package/README.md +115 -3
- package/dist/index.html +1 -0
- package/dist/main.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
|
+
<b>RNAcanvas Code</b> is a web app for code-centric drawing of nucleic acid structures.
|
|
2
|
+
|
|
3
|
+
# Console Interaction
|
|
4
|
+
|
|
5
|
+
<b>RNAcanvas Code</b> can be interacted with using the web browser console.
|
|
6
|
+
|
|
7
|
+
The web browser console can be opened by pressing `Ctrl+Shift+I` (or `Cmd+Option+I` on Mac)
|
|
8
|
+
and switching to the console tab.
|
|
9
|
+
|
|
1
10
|
# Quickstart
|
|
2
11
|
|
|
3
|
-
|
|
12
|
+
### Drawing a structure
|
|
4
13
|
|
|
5
|
-
```
|
|
14
|
+
```javascript
|
|
6
15
|
// the structure to draw
|
|
7
16
|
var seq = 'AGAGUAGCAUUCUGCUUUAGACUGUUAACUUUAUGAACCACGCGUGUCACGUGGGGAGAGUUAACAGCGCCC';
|
|
8
17
|
var dotBracket = '(((((((....)))))))...(((((((((((.....(((((.......)))))..))))))))))).....';
|
|
@@ -10,9 +19,112 @@ var dotBracket = '(((((((....)))))))...(((((((((((.....(((((.......)))))..))))))
|
|
|
10
19
|
app.drawDotBracket(seq, dotBracket);
|
|
11
20
|
|
|
12
21
|
// add some extra space around the drawn structure
|
|
13
|
-
// (and ensure that the drawing is big enough
|
|
22
|
+
// (and ensure that the drawing is big enough for the drawn structure)
|
|
14
23
|
app.drawing.setPadding(500);
|
|
15
24
|
|
|
16
25
|
// fit the user's view of the drawing to the drawn structure
|
|
17
26
|
app.drawingView.fitToContent();
|
|
18
27
|
```
|
|
28
|
+
|
|
29
|
+
### Controlling the layout of bases
|
|
30
|
+
|
|
31
|
+
See the [full documentation](https://pzhaojohnson.github.io/rnacanvas.bases-layout/)
|
|
32
|
+
for the `@rnacanvas/bases-layout` package.
|
|
33
|
+
|
|
34
|
+
```javascript
|
|
35
|
+
// all bases in the drawing
|
|
36
|
+
var bases = [...app.drawing.bases];
|
|
37
|
+
|
|
38
|
+
// shift the bases by the given vector
|
|
39
|
+
shift(bases, { x: 500, y: -350 });
|
|
40
|
+
|
|
41
|
+
// rotate the bases by 120 degrees clockwise
|
|
42
|
+
rotate(bases, 2 * Math.PI / 3);
|
|
43
|
+
|
|
44
|
+
// represents the central point of all bases
|
|
45
|
+
var centroid = new Centroid(bases);
|
|
46
|
+
|
|
47
|
+
// recenter the bases at (912, 204)
|
|
48
|
+
centroid.set({ x: 912, y: 204 });
|
|
49
|
+
centroid.get(); // { x: 912, y: 204 }
|
|
50
|
+
|
|
51
|
+
// all base-pairs in the secondary structure of the drawing
|
|
52
|
+
var basePairs = [...app.drawing.secondaryBonds].map(sb => [...sb.basePair]];
|
|
53
|
+
|
|
54
|
+
// radialize the bases
|
|
55
|
+
// (the default layout for the bases in a structure)
|
|
56
|
+
radialize(bases, basePairs, { spacing: 20, basePairSpacing: 10, hairpinLoopSpacing: 10 });
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### Editing and styling drawing elements
|
|
60
|
+
|
|
61
|
+
Attributes and properties of elements in the drawing of the app can be directly accessed and set.
|
|
62
|
+
|
|
63
|
+
```javascript
|
|
64
|
+
// make all U's lowercase and red
|
|
65
|
+
[...app.drawing.bases].filter(b => b.textContent === 'U').forEach(b => {
|
|
66
|
+
b.textContent = 'u';
|
|
67
|
+
b.setAttribute('fill', 'red');
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
// trace the sequence of the structure
|
|
71
|
+
[...app.drawing.primaryBonds].forEach(pb => {
|
|
72
|
+
pb.set({
|
|
73
|
+
basePadding1: 0,
|
|
74
|
+
basePadding2: 0,
|
|
75
|
+
attributes: {
|
|
76
|
+
'stroke': 'blue',
|
|
77
|
+
'stroke-width': '2',
|
|
78
|
+
'stroke-linecap': 'round',
|
|
79
|
+
},
|
|
80
|
+
});
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
// give all secondary bonds a line thickness of 3 and rounded ends
|
|
84
|
+
[...app.drawing.secondaryBonds].forEach(sb => {
|
|
85
|
+
sb.setAttributes({
|
|
86
|
+
'stroke-width': '3',
|
|
87
|
+
'stroke-linecap': 'round',
|
|
88
|
+
});
|
|
89
|
+
});
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### Exporting a drawing
|
|
93
|
+
|
|
94
|
+
Drawings can be exported in SVG format,
|
|
95
|
+
which can be opened (and edited further) in vector graphics softwares
|
|
96
|
+
like Adobe Illustrator and Inkscape.
|
|
97
|
+
|
|
98
|
+
```javascript
|
|
99
|
+
// the outer HTML of the drawing is SVG XML that can be exported
|
|
100
|
+
var file = new DownloadableFile(app.drawing.outerHTML);
|
|
101
|
+
|
|
102
|
+
file.downloadAs('drawing.svg', { type: 'text/plain' });
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
# The RNAcanvas app object
|
|
106
|
+
|
|
107
|
+
The RNAcanvas app object (accessible via the `app` global variable)
|
|
108
|
+
represents the entire RNAcanvas app.
|
|
109
|
+
|
|
110
|
+
```javascript
|
|
111
|
+
// the RNAcanvas app object
|
|
112
|
+
app
|
|
113
|
+
|
|
114
|
+
// the nucleic acid structure drawing of the app
|
|
115
|
+
app.drawing
|
|
116
|
+
|
|
117
|
+
// the scrollbars for the drawing
|
|
118
|
+
app.horizontalDrawingScrollbar
|
|
119
|
+
app.verticalDrawingScrollbar
|
|
120
|
+
|
|
121
|
+
// represents the user's view of the drawing
|
|
122
|
+
// (can be used to fit the user's view to the drawn structure, for instance)
|
|
123
|
+
app.drawingView
|
|
124
|
+
|
|
125
|
+
var seq = 'AAAAGAUAGCCUCCCUCCUCGCGCGGGGGGGGGGCCUGCCC';
|
|
126
|
+
var dotBracket = '........(((((((((((.....)))))))))))......';
|
|
127
|
+
|
|
128
|
+
// appends the provided dot-bracket structure to the drawing of the app
|
|
129
|
+
app.drawDotBracket(seq, dotBracket);
|
|
130
|
+
```
|