{"action":"created","comment":{"url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/comments/57634021","id":57634021,"diff_hunk":"@@ -55,6 +55,73 @@ export default class Renderer {\n     return nodeEl;\n   }\n \n+  // extract all the literals, create clones, and absolutely position \n+  // them at their original locations\n+  animateTransition(ast, toBlocks) {\n+    var that = this, rootNodes = ast.rootNodes;\n+    // take note of the parent elt, CM offsets, and literals from the AST\n+    var cm = this.cm, parent = this.cm.getScrollerElement();\n+    let {left: offsetLeft, top: offsetTop} = parent.getBoundingClientRect();\n+\n+    // toDom : AST Node -> DOM Node\n+    // given a literal AST node, make a DOM node with the same srcLoc info\n+    function toDom(literal) {\n+      let el = document.createElement(\"span\");\n+      el.appendChild(document.createTextNode(literal.value.toString()));\n+      return el;\n+    }\n+\n+    // given a literal, a clone, and whether we're coming from text...\n+    // position the clone over the currently-rendered literal\n+    function assignClonePosition(literal, clone, fromText) {\n+      if(fromText){ // if we're coming from text, fake a literal to get coords\n+        literal.el = toDom(literal);\n+        var tm = cm.markText(literal.from, literal.to, { replacedWith: literal.el });\n+      }\n+      // assign the location and other style info\n+      let {left, top, width, height} = literal.el.getBoundingClientRect(); \n+      clone.style.top    = (top - offsetTop) + parent.scrollTop  + \"px\";\n+      clone.style.left   = (left- offsetLeft)+ parent.scrollLeft + \"px\";\n+      clone.style.width      = width  + \"px\";\n+      clone.style.height     = height + \"px\";\n+      clone.style.display    = \"inline-block\";\n+      clone.style.position   = \"absolute\";\n+      clone.style.animation  = \"none\";\n+      clone.className        = \"transition\";\n+      if(fromText) { tm.clear(); } // clean up the faked marker\n+    }\n+\n+    // 1) get all the literals from the AST, and make clones of them\n+    let literals = rootNodes.reduce((acc, r) => {\n+      return acc.concat(Array.from(r).filter((n) => n.type===\"literal\"));\n+    }, []);\n+    let clones = literals.map(toDom);\n+\n+    // 2) move each clone to the *origin* location of the corresponding literal \n+    literals.forEach(function(literal, i) {\n+      assignClonePosition(literal, clones[i], toBlocks);\n+      parent.appendChild(clones[i]);\n+    });\n+\n+    // 3) render or clear the original AST\n+    if(toBlocks) { \n+      rootNodes.forEach(r => { that.render(r);  r.el.style.animationName = \"fadein\"; });","path":"src/Renderer.js","position":54,"original_position":54,"commit_id":"bde384154c636d3d7ee0d8d3db703567a72b9337","original_commit_id":"bde384154c636d3d7ee0d8d3db703567a72b9337","user":{"login":"pcardune","id":124827,"avatar_url":"https://avatars.githubusercontent.com/u/124827?v=3","gravatar_id":"","url":"https://api.github.com/users/pcardune","html_url":"https://github.com/pcardune","followers_url":"https://api.github.com/users/pcardune/followers","following_url":"https://api.github.com/users/pcardune/following{/other_user}","gists_url":"https://api.github.com/users/pcardune/gists{/gist_id}","starred_url":"https://api.github.com/users/pcardune/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pcardune/subscriptions","organizations_url":"https://api.github.com/users/pcardune/orgs","repos_url":"https://api.github.com/users/pcardune/repos","events_url":"https://api.github.com/users/pcardune/events{/privacy}","received_events_url":"https://api.github.com/users/pcardune/received_events","type":"User","site_admin":false},"body":"you can use `this` instead of `that` and it will be the same thing.\r\n\r\nAlso, one statement per line please.","created_at":"2016-03-28T21:07:16Z","updated_at":"2016-03-28T21:07:16Z","html_url":"https://github.com/bootstrapworld/codemirror-blocks/pull/53#discussion_r57634021","pull_request_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/53","_links":{"self":{"href":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/comments/57634021"},"html":{"href":"https://github.com/bootstrapworld/codemirror-blocks/pull/53#discussion_r57634021"},"pull_request":{"href":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/53"}}},"pull_request":{"url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/53","id":64269222,"html_url":"https://github.com/bootstrapworld/codemirror-blocks/pull/53","diff_url":"https://github.com/bootstrapworld/codemirror-blocks/pull/53.diff","patch_url":"https://github.com/bootstrapworld/codemirror-blocks/pull/53.patch","issue_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues/53","number":53,"state":"closed","locked":false,"title":"Animation","user":{"login":"schanzer","id":77126,"avatar_url":"https://avatars.githubusercontent.com/u/77126?v=3","gravatar_id":"","url":"https://api.github.com/users/schanzer","html_url":"https://github.com/schanzer","followers_url":"https://api.github.com/users/schanzer/followers","following_url":"https://api.github.com/users/schanzer/following{/other_user}","gists_url":"https://api.github.com/users/schanzer/gists{/gist_id}","starred_url":"https://api.github.com/users/schanzer/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/schanzer/subscriptions","organizations_url":"https://api.github.com/users/schanzer/orgs","repos_url":"https://api.github.com/users/schanzer/repos","events_url":"https://api.github.com/users/schanzer/events{/privacy}","received_events_url":"https://api.github.com/users/schanzer/received_events","type":"User","site_admin":false},"body":"","created_at":"2016-03-27T16:22:55Z","updated_at":"2016-03-28T21:07:16Z","closed_at":"2016-03-27T16:29:08Z","merged_at":"2016-03-27T16:29:08Z","merge_commit_sha":"0749faeef6622f5920dcd9afacfbb010ddd7cbbf","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/53/commits","review_comments_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/53/comments","review_comment_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/comments{/number}","comments_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues/53/comments","statuses_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/statuses/bde384154c636d3d7ee0d8d3db703567a72b9337","head":{"label":"bootstrapworld:animation","ref":"animation","sha":"bde384154c636d3d7ee0d8d3db703567a72b9337","user":{"login":"bootstrapworld","id":1819394,"avatar_url":"https://avatars.githubusercontent.com/u/1819394?v=3","gravatar_id":"","url":"https://api.github.com/users/bootstrapworld","html_url":"https://github.com/bootstrapworld","followers_url":"https://api.github.com/users/bootstrapworld/followers","following_url":"https://api.github.com/users/bootstrapworld/following{/other_user}","gists_url":"https://api.github.com/users/bootstrapworld/gists{/gist_id}","starred_url":"https://api.github.com/users/bootstrapworld/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bootstrapworld/subscriptions","organizations_url":"https://api.github.com/users/bootstrapworld/orgs","repos_url":"https://api.github.com/users/bootstrapworld/repos","events_url":"https://api.github.com/users/bootstrapworld/events{/privacy}","received_events_url":"https://api.github.com/users/bootstrapworld/received_events","type":"Organization","site_admin":false},"repo":{"id":47348837,"name":"codemirror-blocks","full_name":"bootstrapworld/codemirror-blocks","owner":{"login":"bootstrapworld","id":1819394,"avatar_url":"https://avatars.githubusercontent.com/u/1819394?v=3","gravatar_id":"","url":"https://api.github.com/users/bootstrapworld","html_url":"https://github.com/bootstrapworld","followers_url":"https://api.github.com/users/bootstrapworld/followers","following_url":"https://api.github.com/users/bootstrapworld/following{/other_user}","gists_url":"https://api.github.com/users/bootstrapworld/gists{/gist_id}","starred_url":"https://api.github.com/users/bootstrapworld/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bootstrapworld/subscriptions","organizations_url":"https://api.github.com/users/bootstrapworld/orgs","repos_url":"https://api.github.com/users/bootstrapworld/repos","events_url":"https://api.github.com/users/bootstrapworld/events{/privacy}","received_events_url":"https://api.github.com/users/bootstrapworld/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/bootstrapworld/codemirror-blocks","description":"A library for making functional languages editable using visual blocks inside of codemirror:","fork":false,"url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks","forks_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/forks","keys_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/keys{/key_id}","collaborators_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/teams","hooks_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/hooks","issue_events_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues/events{/number}","events_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/events","assignees_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/assignees{/user}","branches_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/branches{/branch}","tags_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/tags","blobs_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/refs{/sha}","trees_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/trees{/sha}","statuses_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/statuses/{sha}","languages_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/languages","stargazers_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/stargazers","contributors_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/contributors","subscribers_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/subscribers","subscription_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/subscription","commits_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/commits{/sha}","git_commits_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/commits{/sha}","comments_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/comments{/number}","issue_comment_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues/comments{/number}","contents_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/contents/{+path}","compare_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/compare/{base}...{head}","merges_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/merges","archive_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/downloads","issues_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues{/number}","pulls_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls{/number}","milestones_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/milestones{/number}","notifications_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/labels{/name}","releases_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/releases{/id}","deployments_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/deployments","created_at":"2015-12-03T17:38:13Z","updated_at":"2016-02-22T16:05:53Z","pushed_at":"2016-03-28T19:02:33Z","git_url":"git://github.com/bootstrapworld/codemirror-blocks.git","ssh_url":"git@github.com:bootstrapworld/codemirror-blocks.git","clone_url":"https://github.com/bootstrapworld/codemirror-blocks.git","svn_url":"https://github.com/bootstrapworld/codemirror-blocks","homepage":"http://bootstrapworld.github.io/codemirror-blocks/","size":15732,"stargazers_count":4,"watchers_count":4,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":3,"mirror_url":null,"open_issues_count":14,"forks":3,"open_issues":14,"watchers":4,"default_branch":"master"}},"base":{"label":"bootstrapworld:master","ref":"master","sha":"4e09aaaea4796291603a80170577c3a7f12c0bdc","user":{"login":"bootstrapworld","id":1819394,"avatar_url":"https://avatars.githubusercontent.com/u/1819394?v=3","gravatar_id":"","url":"https://api.github.com/users/bootstrapworld","html_url":"https://github.com/bootstrapworld","followers_url":"https://api.github.com/users/bootstrapworld/followers","following_url":"https://api.github.com/users/bootstrapworld/following{/other_user}","gists_url":"https://api.github.com/users/bootstrapworld/gists{/gist_id}","starred_url":"https://api.github.com/users/bootstrapworld/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bootstrapworld/subscriptions","organizations_url":"https://api.github.com/users/bootstrapworld/orgs","repos_url":"https://api.github.com/users/bootstrapworld/repos","events_url":"https://api.github.com/users/bootstrapworld/events{/privacy}","received_events_url":"https://api.github.com/users/bootstrapworld/received_events","type":"Organization","site_admin":false},"repo":{"id":47348837,"name":"codemirror-blocks","full_name":"bootstrapworld/codemirror-blocks","owner":{"login":"bootstrapworld","id":1819394,"avatar_url":"https://avatars.githubusercontent.com/u/1819394?v=3","gravatar_id":"","url":"https://api.github.com/users/bootstrapworld","html_url":"https://github.com/bootstrapworld","followers_url":"https://api.github.com/users/bootstrapworld/followers","following_url":"https://api.github.com/users/bootstrapworld/following{/other_user}","gists_url":"https://api.github.com/users/bootstrapworld/gists{/gist_id}","starred_url":"https://api.github.com/users/bootstrapworld/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bootstrapworld/subscriptions","organizations_url":"https://api.github.com/users/bootstrapworld/orgs","repos_url":"https://api.github.com/users/bootstrapworld/repos","events_url":"https://api.github.com/users/bootstrapworld/events{/privacy}","received_events_url":"https://api.github.com/users/bootstrapworld/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/bootstrapworld/codemirror-blocks","description":"A library for making functional languages editable using visual blocks inside of codemirror:","fork":false,"url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks","forks_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/forks","keys_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/keys{/key_id}","collaborators_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/teams","hooks_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/hooks","issue_events_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues/events{/number}","events_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/events","assignees_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/assignees{/user}","branches_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/branches{/branch}","tags_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/tags","blobs_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/refs{/sha}","trees_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/trees{/sha}","statuses_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/statuses/{sha}","languages_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/languages","stargazers_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/stargazers","contributors_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/contributors","subscribers_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/subscribers","subscription_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/subscription","commits_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/commits{/sha}","git_commits_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/git/commits{/sha}","comments_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/comments{/number}","issue_comment_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues/comments{/number}","contents_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/contents/{+path}","compare_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/compare/{base}...{head}","merges_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/merges","archive_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/downloads","issues_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues{/number}","pulls_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls{/number}","milestones_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/milestones{/number}","notifications_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/labels{/name}","releases_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/releases{/id}","deployments_url":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/deployments","created_at":"2015-12-03T17:38:13Z","updated_at":"2016-02-22T16:05:53Z","pushed_at":"2016-03-28T19:02:33Z","git_url":"git://github.com/bootstrapworld/codemirror-blocks.git","ssh_url":"git@github.com:bootstrapworld/codemirror-blocks.git","clone_url":"https://github.com/bootstrapworld/codemirror-blocks.git","svn_url":"https://github.com/bootstrapworld/codemirror-blocks","homepage":"http://bootstrapworld.github.io/codemirror-blocks/","size":15732,"stargazers_count":4,"watchers_count":4,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":true,"forks_count":3,"mirror_url":null,"open_issues_count":14,"forks":3,"open_issues":14,"watchers":4,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/53"},"html":{"href":"https://github.com/bootstrapworld/codemirror-blocks/pull/53"},"issue":{"href":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues/53"},"comments":{"href":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/issues/53/comments"},"review_comments":{"href":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/53/comments"},"review_comment":{"href":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/pulls/53/commits"},"statuses":{"href":"https://api.github.com/repos/bootstrapworld/codemirror-blocks/statuses/bde384154c636d3d7ee0d8d3db703567a72b9337"}}}}