separate concept originUrl and codeCacheUri on CanvasAnim

Author: david-hodgetts

doc.org

@@ -16,11 +16,11 @@ net.loadAssemblage(x, assName, init)
 exquis.init is called with all the loaded animations as argument
 exquis.init creates an exquis object and calls makeEditor(exquis)
 
-* ev.loadJsAnimOnCanvasAnim
+* ev.loadJsAnimOnCanvasAnim DELETED
 loads animationCode from uri with requirejs
 sets canvasAnim.animationName 
 TODO compute the animation name from the url instead of taking an argument 
-** evileval.evalAnimation
+** evileval.evalAnimation DELETED
 converts codeString to data uri
 TODO converting the codeString to data uri is now the job of canvasAnim.setCodeString
 delete this method
@@ -39,7 +39,6 @@ or else loads it from the store with originalUrl and calls setCodeString
 
 ***** editorController.textAreaController.updateWithCanvasAnim (if ! match data:)
 - loads the code as text (codeString) from the url TODO put this in canvasAnim.getSourceCodeString
-- stores it in a data uri  TODO put this on canvasAnim.setCodeString
 - puts the codeString in the editor
 
 ******* TODO find a better name for this method: editorController.loadCodeString(canvasAnim)?
@@ -61,7 +60,7 @@ The store needs to know where to save an animation based on its url.
 Currently the original url is replaced by a data uri when it is first edited,
 because it's only used to load the code. We need to keep it in order to save it.
 
-******* TODO canvasAnim.originalUrl .codeUri
+******* DONE canvasAnim.originalUrl .codeUri
 originalUrl is the address from where the animation is first loaded
 codeUri is a data uri that contains the code being edited
 

public/evileval.js

@@ -1,11 +1,5 @@
 define([], function(){
 
-    var evalAnimation = function(codeString, canvasAnim){
-        // TODO this is not a path, rename
-        var jsAnimPath = toDataUri(codeString);
-        return loadJsAnimOnCanvasAnim(jsAnimPath, canvasAnim, canvasAnim.animationName);
-    };
-
     var loadJsAnim = function(jsAnimPath){
         return new Promise(function(resolve, reject){
             require([jsAnimPath],
@@ -18,16 +12,6 @@ define([], function(){
         });
     };
 
-    // TODO this method should only be called by a canvasAnim who uses the store to
-    // convert path to name
-    var loadJsAnimOnCanvasAnim = function(jsAnimPath, canvasAnim, animationName){
-        return loadJsAnim(jsAnimPath)
-            .then(function(evaluatedAnimationClone){
-                canvasAnim.setAnimation(evaluatedAnimationClone, jsAnimPath);
-                return canvasAnim;
-            });
-    };
-    
     var toDataUri = function(jsCode){
         return "data:text/javascript;base64," + btoa(jsCode);
     },
@@ -45,8 +29,7 @@ define([], function(){
     };
 
     return {
-        loadJsAnimOnCanvasAnim: loadJsAnimOnCanvasAnim,
-        evalAnimation: evalAnimation,
+        loadJsAnim: loadJsAnim , 
         toDataUri: toDataUri,
         dataUri2text: dataUri2text,
         stringifyJSON: stringifyJSON  

public/exquis.js

@@ -52,25 +52,38 @@ define(["iter2d", "csshelper", "evileval", "net", "ui"], function(iter2d, csshel
                 this.currentCode.draw(context, borders, this.lib);
             },
 
+            toDataUri : function(jsCode){
+                return "data:text/javascript;base64," + btoa(jsCode);
+            },
+            
             addCodeStringToEvaluate: function(codeString){
-                var canvasAnim = this;
                 return new Promise(function(resolve, reject){
-                    canvasAnim.evaluateCode = function(){
-                        evileval.evalAnimation(codeString, canvasAnim)
-                            .then(function(){
+                    this.evaluateCode = function(){
+                        var codeAsUri = this.toDataUri(codeString);
+                        evileval.loadJsAnim(codeAsUri)
+                            .then(function(evaluatedAnimationClone){
+                                this.setAnimation(evaluatedAnimationClone, this.originalUrl);
+                                this.codeCacheUri = codeAsUri;
                                 resolve();
-                            }, function(err){
+                            }.bind(this))
+                            .catch( function(err){
                                 console.log(err);
                                 reject(err);
                             });
                     };
-                });
+                }.bind(this));
+            },
+            loadAnim: function(url){
+                return evileval.loadJsAnim(url).then(function(evaluatedAnimationClone){
+                    this.setAnimation(evaluatedAnimationClone, url);
+                    this.codeCacheUri = null;
+                    return this;
+                }.bind(this));
             },
- 
             setAnimation: function(codeToSetup, uri){
                 this.codeToSetup = codeToSetup;
                 this.animationName = net.extractAnimationNameFromUri(uri),
-                this.uri = uri;
+                this.originalUrl = uri;
                 this.setup = function(){
                     // force reset matrix
                     context.setTransform(1, 0, 0, 1, 0, 0);
@@ -83,16 +96,16 @@ define(["iter2d", "csshelper", "evileval", "net", "ui"], function(iter2d, csshel
 
             getSourceCodeString: function(){
                 //TODO continue refactoring here, see doc.org
-                if (this.uri.match(/^data:/)){
+                if (this.codeCacheUri){
                     // the code is in the cache
                     return new Promise(function(resolve, reject){
-                        var animCodeString = evileval.dataUri2text(this.uri);
+                        var animCodeString = evileval.dataUri2text(this.codeCacheUri);
                         resolve(animCodeString);
                     }.bind(this));
                 }else{
                     // get the code from the internets
-                    return net.HTTPget(this.uri).then(function(animCodeString){
-                        this.animationName = net.extractAnimationNameFromUri(this.uri);
+                    return net.HTTPget(this.originalUrl).then(function(animCodeString){
+                        this.animationName = net.extractAnimationNameFromUri(this.originalUrl);
                         this.addCodeStringToEvaluate(animCodeString);
                         return animCodeString;
                     }.bind(this));
@@ -161,7 +174,7 @@ define(["iter2d", "csshelper", "evileval", "net", "ui"], function(iter2d, csshel
             }).then(function(animationName){
                 if (animationName){
                     var fileUri = store.animationNameToUri(animationName);
-                    return evileval.loadJsAnimOnCanvasAnim(fileUri, canvasAnim, animationName);
+                    return canvasAnim.loadAnim(fileUri);
                 }else{
                     throw "no animation name";
                 }
@@ -236,9 +249,7 @@ define(["iter2d", "csshelper", "evileval", "net", "ui"], function(iter2d, csshel
                 cell = makeCell(row, col, height, width);
             cell.canvasAnim = makeCanvasAnimation(cell.context);
             addCellUiListeners(cell.ui, cell.canvasAnim, store);
-            // TODO the next two lines should be a function on canvasAnim
-            var animationName = store.uriToAnimationName(animUri);
-            evileval.loadJsAnimOnCanvasAnim(animUri, cell.canvasAnim, animationName); 
+            cell.canvasAnim.loadAnim(animUri);
             return cell;
         });
 

public/net.js

@@ -3,10 +3,10 @@
 define(["iter2d", "evileval"], function(iter2d, evileval){
 
     var saveAnimation = function(canvasAnim, callback, fileName){
-        if (!canvasAnim.uri.match(/^data:/)){
+        if (!canvasAnim.codeCacheUri){
             return;
         }
-        var JSString = evileval.dataUri2text(canvasAnim.uri),
+        var JSString = evileval.dataUri2text(canvasAnim.codeCacheUri),
             dirName = "animations",
             name = (fileName || canvasAnim.animationName) + ".js";
 

todo.org

@@ -13,9 +13,6 @@ par exemple en mettant les boutons de l'animation à coté de son nom, ou les me
 ** remplacer setInterval par requestAnimation
 * new animations
 * bugs
-** TODO animation name is displayed incorectly the second time you click on edit cell button
-net.extractAnimationNameFromUri cannot deduce the name from a data uri
-this problem will be solved when we introduce the distinction between canvasAnim.originalUrl and .codeUri 
 
 * implement blockly interface https://code.google.com/p/blockly/
 * allow usage of files from external urls (github.com, pastebin, etc)