@rnacanvas/code 1.6.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 +69 -6
- package/dist/index.html +1 -0
- package/dist/main.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
|
+
<b>RNAcanvas Code</b> is a web app for code-centric drawing of nucleic acid structures.
|
|
2
|
+
|
|
1
3
|
# Console Interaction
|
|
2
4
|
|
|
3
|
-
RNAcanvas Code can be interacted with using the web browser console.
|
|
5
|
+
<b>RNAcanvas Code</b> can be interacted with using the web browser console.
|
|
4
6
|
|
|
5
|
-
The web browser console can be opened
|
|
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.
|
|
6
9
|
|
|
7
10
|
# Quickstart
|
|
8
11
|
|
|
9
12
|
### Drawing a structure
|
|
10
13
|
|
|
11
|
-
```
|
|
14
|
+
```javascript
|
|
12
15
|
// the structure to draw
|
|
13
16
|
var seq = 'AGAGUAGCAUUCUGCUUUAGACUGUUAACUUUAUGAACCACGCGUGUCACGUGGGGAGAGUUAACAGCGCCC';
|
|
14
17
|
var dotBracket = '(((((((....)))))))...(((((((((((.....(((((.......)))))..))))))))))).....';
|
|
@@ -28,7 +31,7 @@ app.drawingView.fitToContent();
|
|
|
28
31
|
See the [full documentation](https://pzhaojohnson.github.io/rnacanvas.bases-layout/)
|
|
29
32
|
for the `@rnacanvas/bases-layout` package.
|
|
30
33
|
|
|
31
|
-
```
|
|
34
|
+
```javascript
|
|
32
35
|
// all bases in the drawing
|
|
33
36
|
var bases = [...app.drawing.bases];
|
|
34
37
|
|
|
@@ -39,7 +42,7 @@ shift(bases, { x: 500, y: -350 });
|
|
|
39
42
|
rotate(bases, 2 * Math.PI / 3);
|
|
40
43
|
|
|
41
44
|
// represents the central point of all bases
|
|
42
|
-
|
|
45
|
+
var centroid = new Centroid(bases);
|
|
43
46
|
|
|
44
47
|
// recenter the bases at (912, 204)
|
|
45
48
|
centroid.set({ x: 912, y: 204 });
|
|
@@ -53,15 +56,75 @@ var basePairs = [...app.drawing.secondaryBonds].map(sb => [...sb.basePair]];
|
|
|
53
56
|
radialize(bases, basePairs, { spacing: 20, basePairSpacing: 10, hairpinLoopSpacing: 10 });
|
|
54
57
|
```
|
|
55
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
|
+
|
|
56
92
|
### Exporting a drawing
|
|
57
93
|
|
|
58
94
|
Drawings can be exported in SVG format,
|
|
59
95
|
which can be opened (and edited further) in vector graphics softwares
|
|
60
96
|
like Adobe Illustrator and Inkscape.
|
|
61
97
|
|
|
62
|
-
```
|
|
98
|
+
```javascript
|
|
63
99
|
// the outer HTML of the drawing is SVG XML that can be exported
|
|
64
100
|
var file = new DownloadableFile(app.drawing.outerHTML);
|
|
65
101
|
|
|
66
102
|
file.downloadAs('drawing.svg', { type: 'text/plain' });
|
|
67
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
|
+
```
|