space-render.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. var fs = require('fs');
  2. var cheerio = require("cheerio");
  3. var artifact_vector_render = require("../public/javascripts/vector-render.js");
  4. global.render_vector_shape = artifact_vector_render.render_vector_shape;
  5. global.render_vector_drawing = artifact_vector_render.render_vector_drawing;
  6. var artifact_view_model = require("../public/javascripts/spacedeck_board_artifacts.js").SpacedeckBoardArtifacts;
  7. var template = fs.readFileSync("views/partials/space-isolated.html");
  8. var dom = cheerio.load(template);
  9. var compiled_js = "";
  10. function emit(str,indent) {
  11. var spaces="";
  12. for (var i=0; i<indent; i++) spaces+=" ";
  13. compiled_js+=spaces+str;
  14. }
  15. function compile_expr(v) {
  16. v=v.replace(/'/g,"\\'");
  17. v=v.replace(/[\r\n]/g," ");
  18. f=/\{([^\|\{]+)\|([^\}]+)\}/.exec(v);
  19. if (f) {
  20. v=v.replace(f[1]+"|"+f[2],f[2]+"("+f[1]+")");
  21. }
  22. // replace braces
  23. v=v.replace(/\{\{\{?/g,"'+");
  24. v=v.replace(/\}\}\}?/g,"+'");
  25. return v;
  26. }
  27. var iterators = 0;
  28. function walk(n,indent) {
  29. if (n.type == "tag") {
  30. //console.log("n: ",n.type,n.name,n.attribs);
  31. }
  32. var braces = 0;
  33. if (n.type == "text") {
  34. if (n.data.match(/[a-zA-Z0-9\{]+/)) {
  35. emit("h+='"+compile_expr(n.data)+"';",indent);
  36. }
  37. }
  38. else if (n.type == "tag") {
  39. var attrs = [];
  40. var keys = Object.keys(n.attribs);
  41. for (var i=0; i<keys.length; i++) {
  42. var k = keys[i];
  43. var v = n.attribs[k];
  44. if (k.substring(0,2) == "v-") {
  45. // vue attribute
  46. if (k.match("v-if")) {
  47. var test = emit("if ("+v+") {",indent);
  48. braces++;
  49. indent++;
  50. }
  51. else if (k.match("v-repeat")) {
  52. var parts = v.split("|")[0].split(":");
  53. var left = parts[0].replace(/ /g,"");
  54. var right = parts[1].replace(/ /g,"");
  55. iterators++;
  56. emit("for (var i"+iterators+"=0;i"+iterators+"<"+right+".length;i"+iterators+"++) {",indent);
  57. emit("var "+left+"="+right+"[i"+iterators+"];",indent+1);
  58. braces++;
  59. indent++;
  60. }
  61. } else {
  62. v=compile_expr(v);
  63. attrs.push(k+"=\""+v+"\"");
  64. }
  65. }
  66. emit("h+='<"+n.name+" "+attrs.join(" ")+">';",indent);
  67. for (var i=0; i<n.children.length; i++) {
  68. walk(n.children[i],indent);
  69. }
  70. emit("h+='</"+n.name+">';", indent);
  71. for (var i=braces; i>0; i--) {
  72. indent--;
  73. emit("}",indent);
  74. }
  75. }
  76. }
  77. function render_space_as_html(space, artifacts) {
  78. if (!compiled_js.length) {
  79. walk(dom("#space")[0],0);
  80. //console.log("compiled template: \n"+compiled_js);
  81. }
  82. // --------
  83. var mouse_state = "idle";
  84. var active_tool = "pointer";
  85. var active_space = space;
  86. var active_space_artifacts = artifacts;
  87. var bounds_zoom = 1;
  88. var bounds_margin_horiz = 0;
  89. var bounds_margin_vert = 0;
  90. var viewport_zoom = 1;
  91. // --------
  92. var editing_artifact_id = null;
  93. var urls_to_links = function(html) {
  94. return html;
  95. }
  96. artifact_view_model.selected_artifacts_dict = {};
  97. for (var i=0; i<active_space_artifacts.length; i++) {
  98. var a = active_space_artifacts[i];
  99. artifact_view_model.update_board_artifact_viewmodel(a);
  100. if (!a.description) a.description = "";
  101. if (!a.title) a.title = "";
  102. }
  103. var h="";
  104. try {
  105. eval(compiled_js);
  106. } catch (e) {
  107. console.error("error rendering space "+space._id+" as html: "+e);
  108. }
  109. var style="html, body, #space { overflow: visible !important; }\n";
  110. style+=".wrapper { border: none !important; }\n";
  111. h='<html>\n<head>\n<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,700,600,800,300|Montserrat:400,700|EB+Garamond|Vollkorn|Fire+Sans|Lato|Roboto|Source+Code+Pro|Ubuntu|Raleway|Playfair+Display|Crimson+Text" rel="stylesheet" type="text/css">\n<link type="text/css" rel="stylesheet" href="https://fast.fonts.net/cssapi/ee1a3484-4d98-4f9f-9f55-020a7b37f3c5.css"/>\n<link rel="stylesheet" href="/stylesheets/style.css"><style>'+style+'</style>\n</head>\n<body id="main">\n'+h+"\n</html>\n";
  112. return h;
  113. }
  114. exports.render_space_as_html = render_space_as_html;