@judah-silva/rnacanvas 0.0.1 → 0.0.2
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/LICENSE +21 -0
- package/README.md +129 -3
- package/dist/index.d.mts +45 -55
- package/dist/index.d.ts +45 -55
- package/dist/index.js +47 -4
- package/dist/index.mjs +47 -4
- package/judah-silva-rnacanvas-0.0.1.tgz +0 -0
- package/package.json +5 -4
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 RNA3DS Lab
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,10 +1,136 @@
|
|
|
1
1
|
# 🧬 RNA Canvas
|
|
2
2
|
|
|
3
|
-
A reusable,
|
|
3
|
+
A reusable, modular 3D canvas component, built with **Babylon.js** and **React**. Designed for the interactive visualization of RNA models.
|
|
4
|
+
|
|
5
|
+
Disclaimer: This component only renders from a custom JSON format for 3D representation of RNA Molecules. Does not currently support standard 3D geometry file formats.
|
|
4
6
|
|
|
5
7
|
## 📦 Installation
|
|
6
8
|
|
|
7
9
|
```bash
|
|
8
|
-
npm install @judah-silva/rnacanvas
|
|
10
|
+
npm install @judah-silva/rnacanvas
|
|
9
11
|
# or
|
|
10
|
-
yarn add @judah-silva/rnacanvas
|
|
12
|
+
yarn add @judah-silva/rnacanvas
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Canvas Description
|
|
16
|
+
|
|
17
|
+
The canvas is an importable **React** component, with an extensive Event Management system for interaction with 3D models.\
|
|
18
|
+
Made using **Babylon.js**, the canvas is designed with a stationary camera, where 3D Motif models are displayed to be rotated, translated, scaled, and compared with RMSD scoring.
|
|
19
|
+
|
|
20
|
+
RNACanvas supports interaction through the mouse, keyboard, and touch screen inputs.
|
|
21
|
+
|
|
22
|
+
## Canvas Usage
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Canvas Component
|
|
26
|
+
|
|
27
|
+
To use it in your project, import it from the package:
|
|
28
|
+
```typescript
|
|
29
|
+
import { Canvas } from '@judah-silva/rnacanvas'
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Then, return an instance of the component like you would with any other **React** component:
|
|
33
|
+
```typescript
|
|
34
|
+
import { Canvas } from '@judah-silva/rnacanvas'
|
|
35
|
+
|
|
36
|
+
export default function Component() {
|
|
37
|
+
// Component code...
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<>
|
|
41
|
+
<Canvas
|
|
42
|
+
// ...
|
|
43
|
+
// CanvasProps
|
|
44
|
+
// ...
|
|
45
|
+
/>
|
|
46
|
+
</>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Canvas Props
|
|
52
|
+
|
|
53
|
+
An interface defining the arguments taken by the Canvas component.
|
|
54
|
+
|
|
55
|
+
```typescript
|
|
56
|
+
export interface CanvasProps {
|
|
57
|
+
title?: string, // Abitrary name for the Canvas
|
|
58
|
+
rendererWidth?: number, // Width of the rendered Canvas
|
|
59
|
+
rendererHeight?: number, // Height of the rendered Canvas
|
|
60
|
+
rendererSizeIsWindow?: boolean, // Boolean determining if Canvas will be window size
|
|
61
|
+
rendererBackgroundColor?: string, // #RRGGBB format color string
|
|
62
|
+
cameraPositionZ?: number, // Number determining Z position of the camera
|
|
63
|
+
motifProps: MotifProps[], // Array of MotifProps objects for Motifs to be displayed
|
|
64
|
+
customEventProps?: AnyEventProps[], // Array of any typed CustomEventProps for custom event listeners
|
|
65
|
+
}
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Here, we can pass in multiple attributes of the Canvas including size and color. All arguments are optional besides ```motifProps```.
|
|
69
|
+
|
|
70
|
+
### Motif Props
|
|
71
|
+
|
|
72
|
+
An interface defining the properties of Motif objects that will be displayed.
|
|
73
|
+
|
|
74
|
+
```typescript
|
|
75
|
+
export interface MotifProps {
|
|
76
|
+
motif: Motif, // Custom Motif object with Babylon.js meshes
|
|
77
|
+
locked: boolean, // Whether or not this Motif will be permanently locked (no interactions allowed) on the canvas
|
|
78
|
+
position?: Vec3, // Custom Vector 3 object
|
|
79
|
+
rotation?: Quat, // Custom Quaternion object
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### Custom Event Props
|
|
84
|
+
|
|
85
|
+
An interface defining the properties of custom event listeners that the scene will trigger.
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
export interface CustomEventProps<T extends Events.Event = Events.Event> {
|
|
89
|
+
eventType: Events.EventType, // Type of Event to listen for.
|
|
90
|
+
callback: (event: T) => void; // Callback function to execute on trigger
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
When creating the CustomEventProps for the CanvasProps:
|
|
95
|
+
|
|
96
|
+
```typescript
|
|
97
|
+
<Canvas
|
|
98
|
+
// ...
|
|
99
|
+
customEventProps = [
|
|
100
|
+
{
|
|
101
|
+
eventType: Events.EventType.KEY_DOWN,
|
|
102
|
+
callback: (e: Events.KeyboardEvent) => {/* code to execute on trigger */},
|
|
103
|
+
} as CustomEventProps<Events.KeyboardEvent>,
|
|
104
|
+
]
|
|
105
|
+
/>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Motif Model Creation
|
|
109
|
+
|
|
110
|
+
### Motif Object
|
|
111
|
+
|
|
112
|
+
There are two wrapper classes made to represent different molecular components of an RNA strand: Motif and Residue. Motif is the primary object that the canvas works with, and it is a collection of Residues. Each Residue is a collection of Babylon Mesh objects.
|
|
113
|
+
|
|
114
|
+
### Motif Creation
|
|
115
|
+
|
|
116
|
+
Use the getMotif function to pass in a custom JSON file, with a specified color, and receive a Motif object.
|
|
117
|
+
|
|
118
|
+
```typescript
|
|
119
|
+
import { getMotif, Motif, MotifProps } from '@judah-silva/rnacanvas'
|
|
120
|
+
|
|
121
|
+
const motif1: Motif = await getMotif(
|
|
122
|
+
'path_to_json',
|
|
123
|
+
'#RRGGBB_color',
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
// Create a MotifProps object for this motif
|
|
127
|
+
const props: MotifProps = {
|
|
128
|
+
motif: motif1,
|
|
129
|
+
locked: false,
|
|
130
|
+
};
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
TALK ABOUT THE DATAMANAGER NEXT, AND THEN THAT SHOULD BE GOOD
|
|
134
|
+
|
|
135
|
+
ACTUALLY, I NEED TO TALK ABOUT RMSD AND ITS INTERFACES AND STUFF TOO :(
|
|
136
|
+
|
package/dist/index.d.mts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { Mesh, TransformNode, Scene, Matrix, Nullable, Quaternion, Observer, Engine, UniversalCamera } from '@babylonjs/core';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Copyright (c)
|
|
5
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
6
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
4
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
7
5
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
8
6
|
*/
|
|
9
7
|
|
|
@@ -14,9 +12,7 @@ declare class Residue extends Group<MeshObject> {
|
|
|
14
12
|
}
|
|
15
13
|
|
|
16
14
|
/**
|
|
17
|
-
* Copyright (c)
|
|
18
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
19
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
15
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
20
16
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
21
17
|
*/
|
|
22
18
|
|
|
@@ -39,9 +35,7 @@ declare class MeshObject {
|
|
|
39
35
|
}
|
|
40
36
|
|
|
41
37
|
/**
|
|
42
|
-
* Copyright (c)
|
|
43
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
44
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
38
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
45
39
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
46
40
|
*/
|
|
47
41
|
|
|
@@ -90,9 +84,7 @@ declare class Vec3 {
|
|
|
90
84
|
}
|
|
91
85
|
|
|
92
86
|
/**
|
|
93
|
-
* Copyright (c)
|
|
94
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
95
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
87
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
96
88
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
97
89
|
*/
|
|
98
90
|
|
|
@@ -122,13 +114,32 @@ declare class Motif extends Group<Residue> {
|
|
|
122
114
|
}
|
|
123
115
|
|
|
124
116
|
/**
|
|
125
|
-
* Copyright (c)
|
|
126
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
127
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
117
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
128
118
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
129
119
|
*/
|
|
130
120
|
|
|
131
121
|
declare namespace Events {
|
|
122
|
+
interface EventMap {
|
|
123
|
+
[EventType.POINTER_DOWN]: PointerEvent;
|
|
124
|
+
[EventType.POINTER_UP]: PointerEvent;
|
|
125
|
+
[EventType.POINTER_MOVE]: PointerEvent;
|
|
126
|
+
[EventType.POINTER_WHEEL]: PointerEvent;
|
|
127
|
+
[EventType.KEY_DOWN]: KeyboardEvent;
|
|
128
|
+
[EventType.KEY_UP]: KeyboardEvent;
|
|
129
|
+
[EventType.TOUCH_START]: PointerEvent;
|
|
130
|
+
[EventType.TOUCH_END]: PointerEvent;
|
|
131
|
+
[EventType.TOUCH_MOVE]: PointerEvent;
|
|
132
|
+
[EventType.PINCH_START]: PinchEvent;
|
|
133
|
+
[EventType.PINCH]: PinchEvent;
|
|
134
|
+
[EventType.PINCH_END]: PinchEvent;
|
|
135
|
+
[EventType.OBJECT_SELECTED]: SelectionEvent;
|
|
136
|
+
[EventType.OBJECT_DESELECTED]: SelectionEvent;
|
|
137
|
+
[EventType.RESIZE]: Event;
|
|
138
|
+
[EventType.RENDER]: Event;
|
|
139
|
+
[EventType.ENGINE_STARTED]: Event;
|
|
140
|
+
[EventType.ENGINE_STOPPED]: Event;
|
|
141
|
+
[key: string]: Event;
|
|
142
|
+
}
|
|
132
143
|
enum EventType {
|
|
133
144
|
POINTER_DOWN = "pointerDown",
|
|
134
145
|
POINTER_UP = "pointerUp",
|
|
@@ -196,9 +207,7 @@ declare namespace Events {
|
|
|
196
207
|
}
|
|
197
208
|
|
|
198
209
|
/**
|
|
199
|
-
* Copyright (c)
|
|
200
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
201
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
210
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
202
211
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
203
212
|
*/
|
|
204
213
|
|
|
@@ -224,7 +233,7 @@ declare class EventManager {
|
|
|
224
233
|
* @param callback Callback function to run when the event is triggered
|
|
225
234
|
* @returns Babylon Observer instance for later removal
|
|
226
235
|
*/
|
|
227
|
-
on<
|
|
236
|
+
on<K extends keyof Events.EventMap>(eventType: K, callback: (event: Events.EventMap[K]) => void): Observer<Events.Event>;
|
|
228
237
|
/**
|
|
229
238
|
* Remove a registered event observer
|
|
230
239
|
* @param observer Babylon Observer with the registered callback
|
|
@@ -263,9 +272,7 @@ declare class EventManager {
|
|
|
263
272
|
}
|
|
264
273
|
|
|
265
274
|
/**
|
|
266
|
-
* Copyright (c)
|
|
267
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
268
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
275
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
269
276
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
270
277
|
*/
|
|
271
278
|
|
|
@@ -318,18 +325,14 @@ declare class RenderScene {
|
|
|
318
325
|
}
|
|
319
326
|
|
|
320
327
|
/**
|
|
321
|
-
* Copyright (c)
|
|
322
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
323
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
328
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
324
329
|
* @author Judah Silva <jusilva@csumb.edu>
|
|
325
330
|
*/
|
|
326
331
|
|
|
327
332
|
declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
|
|
328
333
|
|
|
329
334
|
/**
|
|
330
|
-
* Copyright (c)
|
|
331
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
332
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
335
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
333
336
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
334
337
|
* @author Judah Silva
|
|
335
338
|
*/
|
|
@@ -351,9 +354,7 @@ declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
|
|
|
351
354
|
declare function getMotif(motifJSONFileName: string, motifColorHex?: string): Promise<Motif>;
|
|
352
355
|
|
|
353
356
|
/**
|
|
354
|
-
* Copyright (c)
|
|
355
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
356
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
357
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
357
358
|
* @author Judah Silva
|
|
358
359
|
*/
|
|
359
360
|
/**
|
|
@@ -370,9 +371,7 @@ declare function getPoints(nucleotideData: number[][]): {
|
|
|
370
371
|
};
|
|
371
372
|
|
|
372
373
|
/**
|
|
373
|
-
* Copyright (c)
|
|
374
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
375
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
374
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
376
375
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
377
376
|
*/
|
|
378
377
|
|
|
@@ -387,12 +386,15 @@ interface MotifProps {
|
|
|
387
386
|
}
|
|
388
387
|
/**
|
|
389
388
|
* ________________________________________________________________________________________________
|
|
390
|
-
|
|
391
|
-
interface CustomEventProps {
|
|
392
|
-
event: Events.Event;
|
|
389
|
+
*/
|
|
390
|
+
interface CustomEventProps<T extends Events.Event = Events.Event> {
|
|
393
391
|
eventType: Events.EventType;
|
|
394
|
-
callback: (event:
|
|
392
|
+
callback: (event: T) => void;
|
|
395
393
|
}
|
|
394
|
+
/**
|
|
395
|
+
* ________________________________________________________________________________________________
|
|
396
|
+
*/
|
|
397
|
+
type AnyEventProps = CustomEventProps<Events.Event> | CustomEventProps<Events.KeyboardEvent> | CustomEventProps<Events.PinchEvent> | CustomEventProps<Events.PointerEvent> | CustomEventProps<Events.SelectionEvent>;
|
|
396
398
|
/**
|
|
397
399
|
* ________________________________________________________________________________________________
|
|
398
400
|
*/
|
|
@@ -404,13 +406,11 @@ interface CanvasProps {
|
|
|
404
406
|
rendererSizeIsWindow?: boolean;
|
|
405
407
|
cameraPositionZ?: number;
|
|
406
408
|
motifProps: MotifProps[];
|
|
407
|
-
customEventProps?:
|
|
409
|
+
customEventProps?: AnyEventProps[];
|
|
408
410
|
}
|
|
409
411
|
|
|
410
412
|
/**
|
|
411
413
|
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
412
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
413
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
414
414
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
415
415
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
416
416
|
*/
|
|
@@ -428,8 +428,6 @@ declare function Canvas({ rendererHeight, rendererWidth, rendererBackgroundColor
|
|
|
428
428
|
|
|
429
429
|
/**
|
|
430
430
|
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
431
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
432
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
433
431
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
434
432
|
*/
|
|
435
433
|
interface ScoreInfo {
|
|
@@ -465,9 +463,7 @@ declare class CanvasDataManager {
|
|
|
465
463
|
}
|
|
466
464
|
|
|
467
465
|
/**
|
|
468
|
-
* Copyright (c)
|
|
469
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
470
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
466
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
471
467
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
472
468
|
* @author Judah Silva <jusilva@csumb.edu>
|
|
473
469
|
*/
|
|
@@ -484,18 +480,14 @@ declare function kabschSlidingWindow(motif1: Motif, motif2: Motif): {
|
|
|
484
480
|
declare function calculateAllKabschRMSD(motifMeshArray: Motif[]): number[][];
|
|
485
481
|
|
|
486
482
|
/**
|
|
487
|
-
* Copyright (c)
|
|
488
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
489
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
483
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
490
484
|
* @author Judah Silva <jusilva@csumb.edu>
|
|
491
485
|
*/
|
|
492
486
|
|
|
493
487
|
declare function calculateRMSD(selectedMotifMeshArray: Motif[], motifMeshArray: Motif[]): ScoreInfo[][];
|
|
494
488
|
|
|
495
489
|
/**
|
|
496
|
-
* Copyright (c)
|
|
497
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
498
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
490
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
499
491
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
500
492
|
* @author Shahidul Islam <sislam@csumb.edu>
|
|
501
493
|
*/
|
|
@@ -517,9 +509,7 @@ declare function getRMSD(motif1: Motif, motif2: Motif): number;
|
|
|
517
509
|
declare function calculateRMSDSlide(coordinates1: Vec3[], coordinates2: Vec3[]): number;
|
|
518
510
|
|
|
519
511
|
/**
|
|
520
|
-
* Copyright (c)
|
|
521
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
522
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
512
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
523
513
|
* @author Judah Silva <jusilva@csumb.edu>
|
|
524
514
|
*/
|
|
525
515
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import { Mesh, TransformNode, Scene, Matrix, Nullable, Quaternion, Observer, Engine, UniversalCamera } from '@babylonjs/core';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
|
-
* Copyright (c)
|
|
5
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
6
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
4
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
7
5
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
8
6
|
*/
|
|
9
7
|
|
|
@@ -14,9 +12,7 @@ declare class Residue extends Group<MeshObject> {
|
|
|
14
12
|
}
|
|
15
13
|
|
|
16
14
|
/**
|
|
17
|
-
* Copyright (c)
|
|
18
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
19
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
15
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
20
16
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
21
17
|
*/
|
|
22
18
|
|
|
@@ -39,9 +35,7 @@ declare class MeshObject {
|
|
|
39
35
|
}
|
|
40
36
|
|
|
41
37
|
/**
|
|
42
|
-
* Copyright (c)
|
|
43
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
44
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
38
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
45
39
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
46
40
|
*/
|
|
47
41
|
|
|
@@ -90,9 +84,7 @@ declare class Vec3 {
|
|
|
90
84
|
}
|
|
91
85
|
|
|
92
86
|
/**
|
|
93
|
-
* Copyright (c)
|
|
94
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
95
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
87
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
96
88
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
97
89
|
*/
|
|
98
90
|
|
|
@@ -122,13 +114,32 @@ declare class Motif extends Group<Residue> {
|
|
|
122
114
|
}
|
|
123
115
|
|
|
124
116
|
/**
|
|
125
|
-
* Copyright (c)
|
|
126
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
127
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
117
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
128
118
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
129
119
|
*/
|
|
130
120
|
|
|
131
121
|
declare namespace Events {
|
|
122
|
+
interface EventMap {
|
|
123
|
+
[EventType.POINTER_DOWN]: PointerEvent;
|
|
124
|
+
[EventType.POINTER_UP]: PointerEvent;
|
|
125
|
+
[EventType.POINTER_MOVE]: PointerEvent;
|
|
126
|
+
[EventType.POINTER_WHEEL]: PointerEvent;
|
|
127
|
+
[EventType.KEY_DOWN]: KeyboardEvent;
|
|
128
|
+
[EventType.KEY_UP]: KeyboardEvent;
|
|
129
|
+
[EventType.TOUCH_START]: PointerEvent;
|
|
130
|
+
[EventType.TOUCH_END]: PointerEvent;
|
|
131
|
+
[EventType.TOUCH_MOVE]: PointerEvent;
|
|
132
|
+
[EventType.PINCH_START]: PinchEvent;
|
|
133
|
+
[EventType.PINCH]: PinchEvent;
|
|
134
|
+
[EventType.PINCH_END]: PinchEvent;
|
|
135
|
+
[EventType.OBJECT_SELECTED]: SelectionEvent;
|
|
136
|
+
[EventType.OBJECT_DESELECTED]: SelectionEvent;
|
|
137
|
+
[EventType.RESIZE]: Event;
|
|
138
|
+
[EventType.RENDER]: Event;
|
|
139
|
+
[EventType.ENGINE_STARTED]: Event;
|
|
140
|
+
[EventType.ENGINE_STOPPED]: Event;
|
|
141
|
+
[key: string]: Event;
|
|
142
|
+
}
|
|
132
143
|
enum EventType {
|
|
133
144
|
POINTER_DOWN = "pointerDown",
|
|
134
145
|
POINTER_UP = "pointerUp",
|
|
@@ -196,9 +207,7 @@ declare namespace Events {
|
|
|
196
207
|
}
|
|
197
208
|
|
|
198
209
|
/**
|
|
199
|
-
* Copyright (c)
|
|
200
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
201
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
210
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
202
211
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
203
212
|
*/
|
|
204
213
|
|
|
@@ -224,7 +233,7 @@ declare class EventManager {
|
|
|
224
233
|
* @param callback Callback function to run when the event is triggered
|
|
225
234
|
* @returns Babylon Observer instance for later removal
|
|
226
235
|
*/
|
|
227
|
-
on<
|
|
236
|
+
on<K extends keyof Events.EventMap>(eventType: K, callback: (event: Events.EventMap[K]) => void): Observer<Events.Event>;
|
|
228
237
|
/**
|
|
229
238
|
* Remove a registered event observer
|
|
230
239
|
* @param observer Babylon Observer with the registered callback
|
|
@@ -263,9 +272,7 @@ declare class EventManager {
|
|
|
263
272
|
}
|
|
264
273
|
|
|
265
274
|
/**
|
|
266
|
-
* Copyright (c)
|
|
267
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
268
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
275
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
269
276
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
270
277
|
*/
|
|
271
278
|
|
|
@@ -318,18 +325,14 @@ declare class RenderScene {
|
|
|
318
325
|
}
|
|
319
326
|
|
|
320
327
|
/**
|
|
321
|
-
* Copyright (c)
|
|
322
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
323
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
328
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
324
329
|
* @author Judah Silva <jusilva@csumb.edu>
|
|
325
330
|
*/
|
|
326
331
|
|
|
327
332
|
declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
|
|
328
333
|
|
|
329
334
|
/**
|
|
330
|
-
* Copyright (c)
|
|
331
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
332
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
335
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
333
336
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
334
337
|
* @author Judah Silva
|
|
335
338
|
*/
|
|
@@ -351,9 +354,7 @@ declare function updateAllMotifs(motifMeshArray: Motif[]): Promise<void>;
|
|
|
351
354
|
declare function getMotif(motifJSONFileName: string, motifColorHex?: string): Promise<Motif>;
|
|
352
355
|
|
|
353
356
|
/**
|
|
354
|
-
* Copyright (c)
|
|
355
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
356
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
357
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
357
358
|
* @author Judah Silva
|
|
358
359
|
*/
|
|
359
360
|
/**
|
|
@@ -370,9 +371,7 @@ declare function getPoints(nucleotideData: number[][]): {
|
|
|
370
371
|
};
|
|
371
372
|
|
|
372
373
|
/**
|
|
373
|
-
* Copyright (c)
|
|
374
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
375
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
374
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
376
375
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
377
376
|
*/
|
|
378
377
|
|
|
@@ -387,12 +386,15 @@ interface MotifProps {
|
|
|
387
386
|
}
|
|
388
387
|
/**
|
|
389
388
|
* ________________________________________________________________________________________________
|
|
390
|
-
|
|
391
|
-
interface CustomEventProps {
|
|
392
|
-
event: Events.Event;
|
|
389
|
+
*/
|
|
390
|
+
interface CustomEventProps<T extends Events.Event = Events.Event> {
|
|
393
391
|
eventType: Events.EventType;
|
|
394
|
-
callback: (event:
|
|
392
|
+
callback: (event: T) => void;
|
|
395
393
|
}
|
|
394
|
+
/**
|
|
395
|
+
* ________________________________________________________________________________________________
|
|
396
|
+
*/
|
|
397
|
+
type AnyEventProps = CustomEventProps<Events.Event> | CustomEventProps<Events.KeyboardEvent> | CustomEventProps<Events.PinchEvent> | CustomEventProps<Events.PointerEvent> | CustomEventProps<Events.SelectionEvent>;
|
|
396
398
|
/**
|
|
397
399
|
* ________________________________________________________________________________________________
|
|
398
400
|
*/
|
|
@@ -404,13 +406,11 @@ interface CanvasProps {
|
|
|
404
406
|
rendererSizeIsWindow?: boolean;
|
|
405
407
|
cameraPositionZ?: number;
|
|
406
408
|
motifProps: MotifProps[];
|
|
407
|
-
customEventProps?:
|
|
409
|
+
customEventProps?: AnyEventProps[];
|
|
408
410
|
}
|
|
409
411
|
|
|
410
412
|
/**
|
|
411
413
|
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
412
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
413
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
414
414
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
415
415
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
416
416
|
*/
|
|
@@ -428,8 +428,6 @@ declare function Canvas({ rendererHeight, rendererWidth, rendererBackgroundColor
|
|
|
428
428
|
|
|
429
429
|
/**
|
|
430
430
|
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
431
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
432
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
433
431
|
* @author Judah Silva <silva.judah7@outlook.com>
|
|
434
432
|
*/
|
|
435
433
|
interface ScoreInfo {
|
|
@@ -465,9 +463,7 @@ declare class CanvasDataManager {
|
|
|
465
463
|
}
|
|
466
464
|
|
|
467
465
|
/**
|
|
468
|
-
* Copyright (c)
|
|
469
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
470
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
466
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
471
467
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
472
468
|
* @author Judah Silva <jusilva@csumb.edu>
|
|
473
469
|
*/
|
|
@@ -484,18 +480,14 @@ declare function kabschSlidingWindow(motif1: Motif, motif2: Motif): {
|
|
|
484
480
|
declare function calculateAllKabschRMSD(motifMeshArray: Motif[]): number[][];
|
|
485
481
|
|
|
486
482
|
/**
|
|
487
|
-
* Copyright (c)
|
|
488
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
489
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
483
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
490
484
|
* @author Judah Silva <jusilva@csumb.edu>
|
|
491
485
|
*/
|
|
492
486
|
|
|
493
487
|
declare function calculateRMSD(selectedMotifMeshArray: Motif[], motifMeshArray: Motif[]): ScoreInfo[][];
|
|
494
488
|
|
|
495
489
|
/**
|
|
496
|
-
* Copyright (c)
|
|
497
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
498
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
490
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
499
491
|
* @author Sameer Dingore <sdingore@csumb.edu>
|
|
500
492
|
* @author Shahidul Islam <sislam@csumb.edu>
|
|
501
493
|
*/
|
|
@@ -517,9 +509,7 @@ declare function getRMSD(motif1: Motif, motif2: Motif): number;
|
|
|
517
509
|
declare function calculateRMSDSlide(coordinates1: Vec3[], coordinates2: Vec3[]): number;
|
|
518
510
|
|
|
519
511
|
/**
|
|
520
|
-
* Copyright (c)
|
|
521
|
-
* All code written for RNA3DS Lab is protected under the terms of the NDA.
|
|
522
|
-
* No code shall be distributed or modified without the permission of the PI.
|
|
512
|
+
* Copyright (c) 2025 RNA3DS Lab CSUMB.
|
|
523
513
|
* @author Judah Silva <jusilva@csumb.edu>
|
|
524
514
|
*/
|
|
525
515
|
|
package/dist/index.js
CHANGED
|
@@ -1423,10 +1423,53 @@ function Canvas({
|
|
|
1423
1423
|
eventManager.on(Events.EventType.KEY_DOWN, onKeyboardSelect);
|
|
1424
1424
|
if (customEventProps) {
|
|
1425
1425
|
customEventProps.forEach((customEventProp) => {
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1426
|
+
switch (customEventProp.eventType) {
|
|
1427
|
+
// Handle Pointer Events
|
|
1428
|
+
case Events.EventType.POINTER_DOWN:
|
|
1429
|
+
case Events.EventType.POINTER_UP:
|
|
1430
|
+
case Events.EventType.POINTER_MOVE:
|
|
1431
|
+
case Events.EventType.POINTER_WHEEL:
|
|
1432
|
+
case Events.EventType.TOUCH_END:
|
|
1433
|
+
case Events.EventType.TOUCH_MOVE:
|
|
1434
|
+
case Events.EventType.TOUCH_START:
|
|
1435
|
+
eventManager.on(
|
|
1436
|
+
customEventProp.eventType,
|
|
1437
|
+
customEventProp.callback
|
|
1438
|
+
);
|
|
1439
|
+
break;
|
|
1440
|
+
// Handle Keyboard Events
|
|
1441
|
+
case Events.EventType.KEY_DOWN:
|
|
1442
|
+
case Events.EventType.KEY_UP:
|
|
1443
|
+
eventManager.on(
|
|
1444
|
+
customEventProp.eventType,
|
|
1445
|
+
customEventProp.callback
|
|
1446
|
+
);
|
|
1447
|
+
break;
|
|
1448
|
+
// Handle Pinch Events
|
|
1449
|
+
case Events.EventType.PINCH:
|
|
1450
|
+
case Events.EventType.PINCH_END:
|
|
1451
|
+
case Events.EventType.PINCH_START:
|
|
1452
|
+
eventManager.on(
|
|
1453
|
+
customEventProp.eventType,
|
|
1454
|
+
customEventProp.callback
|
|
1455
|
+
);
|
|
1456
|
+
break;
|
|
1457
|
+
// Handle Selection Events
|
|
1458
|
+
case Events.EventType.OBJECT_SELECTED:
|
|
1459
|
+
case Events.EventType.OBJECT_DESELECTED:
|
|
1460
|
+
eventManager.on(
|
|
1461
|
+
customEventProp.eventType,
|
|
1462
|
+
customEventProp.callback
|
|
1463
|
+
);
|
|
1464
|
+
break;
|
|
1465
|
+
// Handle Events
|
|
1466
|
+
default:
|
|
1467
|
+
eventManager.on(
|
|
1468
|
+
customEventProp.eventType,
|
|
1469
|
+
customEventProp.callback
|
|
1470
|
+
);
|
|
1471
|
+
break;
|
|
1472
|
+
}
|
|
1430
1473
|
});
|
|
1431
1474
|
}
|
|
1432
1475
|
} else {
|
package/dist/index.mjs
CHANGED
|
@@ -1366,10 +1366,53 @@ function Canvas({
|
|
|
1366
1366
|
eventManager.on(Events.EventType.KEY_DOWN, onKeyboardSelect);
|
|
1367
1367
|
if (customEventProps) {
|
|
1368
1368
|
customEventProps.forEach((customEventProp) => {
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1369
|
+
switch (customEventProp.eventType) {
|
|
1370
|
+
// Handle Pointer Events
|
|
1371
|
+
case Events.EventType.POINTER_DOWN:
|
|
1372
|
+
case Events.EventType.POINTER_UP:
|
|
1373
|
+
case Events.EventType.POINTER_MOVE:
|
|
1374
|
+
case Events.EventType.POINTER_WHEEL:
|
|
1375
|
+
case Events.EventType.TOUCH_END:
|
|
1376
|
+
case Events.EventType.TOUCH_MOVE:
|
|
1377
|
+
case Events.EventType.TOUCH_START:
|
|
1378
|
+
eventManager.on(
|
|
1379
|
+
customEventProp.eventType,
|
|
1380
|
+
customEventProp.callback
|
|
1381
|
+
);
|
|
1382
|
+
break;
|
|
1383
|
+
// Handle Keyboard Events
|
|
1384
|
+
case Events.EventType.KEY_DOWN:
|
|
1385
|
+
case Events.EventType.KEY_UP:
|
|
1386
|
+
eventManager.on(
|
|
1387
|
+
customEventProp.eventType,
|
|
1388
|
+
customEventProp.callback
|
|
1389
|
+
);
|
|
1390
|
+
break;
|
|
1391
|
+
// Handle Pinch Events
|
|
1392
|
+
case Events.EventType.PINCH:
|
|
1393
|
+
case Events.EventType.PINCH_END:
|
|
1394
|
+
case Events.EventType.PINCH_START:
|
|
1395
|
+
eventManager.on(
|
|
1396
|
+
customEventProp.eventType,
|
|
1397
|
+
customEventProp.callback
|
|
1398
|
+
);
|
|
1399
|
+
break;
|
|
1400
|
+
// Handle Selection Events
|
|
1401
|
+
case Events.EventType.OBJECT_SELECTED:
|
|
1402
|
+
case Events.EventType.OBJECT_DESELECTED:
|
|
1403
|
+
eventManager.on(
|
|
1404
|
+
customEventProp.eventType,
|
|
1405
|
+
customEventProp.callback
|
|
1406
|
+
);
|
|
1407
|
+
break;
|
|
1408
|
+
// Handle Events
|
|
1409
|
+
default:
|
|
1410
|
+
eventManager.on(
|
|
1411
|
+
customEventProp.eventType,
|
|
1412
|
+
customEventProp.callback
|
|
1413
|
+
);
|
|
1414
|
+
break;
|
|
1415
|
+
}
|
|
1373
1416
|
});
|
|
1374
1417
|
}
|
|
1375
1418
|
} else {
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@judah-silva/rnacanvas",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.2",
|
|
4
4
|
"description": "A 3D Canvas for displaying and interacting with custom RNA models. Powered by BabylonJS.",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -21,9 +21,10 @@
|
|
|
21
21
|
"react": "18.2.0"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
|
-
"
|
|
25
|
-
"typescript": "^5.8.3",
|
|
24
|
+
"@types/estree": "^1.0.7",
|
|
26
25
|
"@types/numeric": "1.2.6",
|
|
27
|
-
"@types/react": "18.2.35"
|
|
26
|
+
"@types/react": "18.2.35",
|
|
27
|
+
"tsup": "^8.4.0",
|
|
28
|
+
"typescript": "^5.8.3"
|
|
28
29
|
}
|
|
29
30
|
}
|