Fix Curves function names clashing with Runes function names (#341)

* Add loadLib function

- Rename loadLibs -> loadAllLibs
- Make loadLib function that loads specific files

* Use loadLib in saga

* Add canvas initialisation for 3d and curves

This seems to have gona missing from a previous commit. Whoops.

* Refactor file dynamic loading

* Add some documentation

* expose translate and scale

Author: remo5000

public/externalLibs/index.js

@@ -12,9 +12,9 @@ function dynamicallyLoadScript(url) {
 }
 
 /**
- * Loads all the required libraries
+ * Loads all libraries, including sound and graphics.
  */
-function loadLibs() {
+function loadAllLibs() {
   const files = [
     // list library 
     '/externalLibs/list.js',
@@ -39,4 +39,46 @@ function loadLibs() {
   }
 }
 
-loadLibs();
+/**
+ * Loads libraries according to the name provided.
+ * This is to faciliate a lack of namespace clash for 
+ * graphics libraries (@see #341)
+ */
+function loadLib(externalLibraryName) {
+  let files;
+  switch(externalLibraryName) {
+    case "TWO_DIM_RUNES":
+      files = [
+        // graphics
+        '/externalLibs/graphics/gl-matrix.js',
+        '/externalLibs/graphics/webGLgraphics.js',
+        '/externalLibs/graphics/webGLrune.js',
+      ];
+      break;
+    case "THREE_DIM_RUNES":
+      files = [
+        // graphics
+        '/externalLibs/graphics/gl-matrix.js',
+        '/externalLibs/graphics/webGLgraphics.js',
+        '/externalLibs/graphics/webGLrune.js',
+      ];
+      break;
+    case "CURVES":
+      files = [
+        // graphics
+        '/externalLibs/graphics/gl-matrix.js',
+        '/externalLibs/graphics/webGLhi_graph.js',
+        '/externalLibs/graphics/webGLhi_graph_ce.js',
+        '/externalLibs/graphics/webGLgraphics.js',
+        '/externalLibs/graphics/webGLcurve.js',
+      ];
+      break;
+    default:
+      break;
+  }
+  for (var i = 0; i < files.length; i++) {
+    dynamicallyLoadScript(files[i]);
+  }
+}
+
+loadAllLibs();

src/reducers/externalLibraries.ts

@@ -85,7 +85,9 @@ const libEntries: Array<[ExternalLibraryName, string[]]> = [
       'put_in_standard_position',
       'full_view_proportional',
       'squeeze_full_view',
-      'squeeze_rectangular_portion'
+      'squeeze_rectangular_portion',
+      'translate',
+      'scale'
     ]
   ],
   [

src/sagas/index.ts

@@ -200,12 +200,15 @@ function* workspaceSaga(): SagaIterator {
     const externalLibraryName = (action as actionTypes.IAction).payload.library.external.name
     switch (externalLibraryName) {
       case ExternalLibraryNames.TWO_DIM_RUNES:
+        ;(window as any).loadLib('TWO_DIM_RUNES')
         ;(window as any).getReadyWebGLForCanvas('2d')
         break
       case ExternalLibraryNames.THREE_DIM_RUNES:
+        ;(window as any).loadLib('THREE_DIM_RUNES')
         ;(window as any).getReadyWebGLForCanvas('3d')
         break
       case ExternalLibraryNames.CURVES:
+        ;(window as any).loadLib('CURVES')
         ;(window as any).getReadyWebGLForCanvas('curve')
         break
     }