icn3d 3.43.0 → 3.44.0

package/README.md

@@ -14,7 +14,6 @@ The following packages are required as shown in dependency:
 
     npm install jquery
     npm install jsdom
-    npm install three
 
 Usage
 --------
@@ -23,7 +22,6 @@ Usage
     
     To use icn3d to generate Node.js scripts, the source code is from this icn3d npm package. As shown in [one example of Node.js script](https://github.com/ncbi/icn3d/blob/master/icn3dnode/interaction2.js), part of the script can be like the following. All classes and functions can be accessed with the variable "icn3dui". The class structure is listed at [iCn3D Doc](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#classstructure).
     
-    	global.THREE = require('three');
     	let jsdom = require('jsdom');
     	global.$ = require('jquery')(new jsdom.JSDOM().window);
     	
@@ -34,13 +32,11 @@ Usage
 
     You can first specify the "dependencies.js" file as follows:
 
-		import * as THREE from 'icn3d/three'
 		import $ from 'jquery'
 		import 'jquery-ui-bundle';
 
 		import 'jquery-ui-bundle/jquery-ui.min.css';
 
-		global.THREE = THREE
 		global.$ = $
 		global.jQuery = $
     
@@ -67,6 +63,54 @@ Usage
 
 		export default Icn3dViewer;
 
+	<b>Use typescript</b>
+	
+    A few adjustments need to be made to use icn3d with React and typescript. The useEffect needs to be adjusted to include type information, and separate the async call out into its own function. See the following example:
+
+		interface MyProps{
+		  pageInfo: ExampleObject
+		}
+
+		export const Icn3dViewer: React.FC<MyProps> = ({ pageInfo }) => {
+		  useEffect(() => {
+			const fetchViewer = async (): Promise<void> => {
+			const cfg = {
+				divid: 'icn3dwrap',
+				width: '50%',
+				height: '100%',
+				resize: true,
+				rotate: 'right',
+				mobilemenu: true,
+				showcommand: false,
+				showtitle: false,
+				mmdbid: pageInfo.mmdbid,
+				show2d: true,
+			};
+			const icn3dui = new icn3d.iCn3DUI(cfg);
+			await icn3dui.show3DStructure();
+			};
+
+			void fetchViewer();
+
+			return () => {};
+		  }, [pageInfo]);
+		  return <div id="icn3dwrap" />;
+		};
+
+	The config can be customized as needed, while any dependencies the useEffect has need to be added to the end. (In this example, pageInfo). 
+	
+    If your typescript compiler complains about missing type definition files, create a file named icn3d.d.ts in your project's root directory and fill it with the following:
+
+		declare module 'icn3d/module' {
+			export class iCn3DUI {
+				constructor(cfg: object);
+
+				show3DStructure(): Promise<void>;
+			}
+		}
+
+		declare module 'icn3d/three' {}
+
 * <b>Use icn3d as a 3D Viewer with jQuery</b>
 
     The source code is available in the [iCn3D GitHub page](https://github.com/ncbi/icn3d). You can following the instruction at [iCn3D Doc](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#HowToUse). The JavaScript code could be as simple as the following: