library/js/literallycanvas/js/core/svgRenderer.js

   1 var defineSVGRenderer, lineEndCapShapes, renderShapeToSVG, renderers;
   2
   3 lineEndCapShapes = require('./lineEndCapShapes');
   4
   5 renderers = {};
   6
   7 defineSVGRenderer = function(shapeName, shapeToSVGFunc) {
   8   return renderers[shapeName] = shapeToSVGFunc;
   9 };
  10
  11 renderShapeToSVG = function(shape, opts) {
  12   if (opts == null) {
  13     opts = {};
  14   }
  15   if (opts.shouldIgnoreUnsupportedShapes == null) {
  16     opts.shouldIgnoreUnsupportedShapes = false;
  17   }
  18   if (renderers[shape.className]) {
  19     return renderers[shape.className](shape);
  20   } else if (opts.shouldIgnoreUnsupportedShapes) {
  21     console.warn("Can't render shape of type " + shape.className + " to SVG");
  22     return "";
  23   } else {
  24     throw "Can't render shape of type " + shape.className + " to SVG";
  25   }
  26 };
  27
  28 defineSVGRenderer('Rectangle', function(shape) {
  29   var height, width, x, x1, x2, y, y1, y2;
  30   x1 = shape.x;
  31   y1 = shape.y;
  32   x2 = shape.x + shape.width;
  33   y2 = shape.y + shape.height;
  34   x = Math.min(x1, x2);
  35   y = Math.min(y1, y2);
  36   width = Math.max(x1, x2) - x;
  37   height = Math.max(y1, y2) - y;
  38   if (shape.strokeWidth % 2 !== 0) {
  39     x += 0.5;
  40     y += 0.5;
  41   }
  42   return "<rect x='" + x + "' y='" + y + "' width='" + width + "' height='" + height + "' stroke='" + shape.strokeColor + "' fill='" + shape.fillColor + "' stroke-width='" + shape.strokeWidth + "' />";
  43 });
  44
  45 defineSVGRenderer('SelectionBox', function(shape) {
  46   return "";
  47 });
  48
  49 defineSVGRenderer('Ellipse', function(shape) {
  50   var centerX, centerY, halfHeight, halfWidth;
  51   halfWidth = Math.floor(shape.width / 2);
  52   halfHeight = Math.floor(shape.height / 2);
  53   centerX = shape.x + halfWidth;
  54   centerY = shape.y + halfHeight;
  55   return "<ellipse cx='" + centerX + "' cy='" + centerY + "' rx='" + (Math.abs(halfWidth)) + "' ry='" + (Math.abs(halfHeight)) + "' stroke='" + shape.strokeColor + "' fill='" + shape.fillColor + "' stroke-width='" + shape.strokeWidth + "' />";
  56 });
  57
  58 defineSVGRenderer('Image', function(shape) {
  59   return "<image x='" + shape.x + "' y='" + shape.y + "' width='" + (shape.image.naturalWidth * shape.scale) + "' height='" + (shape.image.naturalHeight * shape.scale) + "' xlink:href='" + shape.image.src + "' />";
  60 });
  61
  62 defineSVGRenderer('Line', function(shape) {
  63   var arrowWidth, capString, dashString, x1, x2, y1, y2;
  64   dashString = shape.dash ? "stroke-dasharray='" + (shape.dash.join(', ')) + "'" : '';
  65   capString = '';
  66   arrowWidth = Math.max(shape.strokeWidth * 2.2, 5);
  67   x1 = shape.x1;
  68   x2 = shape.x2;
  69   y1 = shape.y1;
  70   y2 = shape.y2;
  71   if (shape.strokeWidth % 2 !== 0) {
  72     x1 += 0.5;
  73     x2 += 0.5;
  74     y1 += 0.5;
  75     y2 += 0.5;
  76   }
  77   if (shape.endCapShapes[0]) {
  78     capString += lineEndCapShapes[shape.endCapShapes[0]].svg(x1, y1, Math.atan2(y1 - y2, x1 - x2), arrowWidth, shape.color);
  79   }
  80   if (shape.endCapShapes[1]) {
  81     capString += lineEndCapShapes[shape.endCapShapes[1]].svg(x2, y2, Math.atan2(y2 - y1, x2 - x1), arrowWidth, shape.color);
  82   }
  83   return "<g> <line x1='" + x1 + "' y1='" + y1 + "' x2='" + x2 + "' y2='" + y2 + "' " + dashString + " stroke-linecap='" + shape.capStyle + "' stroke='" + shape.color + " 'stroke-width='" + shape.strokeWidth + "' /> " + capString + " </g>";
  84 });
  85
  86 defineSVGRenderer('LinePath', function(shape) {
  87   return "<polyline fill='none' points='" + (shape.smoothedPoints.map(function(p) {
  88     var offset;
  89     offset = p.strokeWidth % 2 === 0 ? 0.0 : 0.5;
  90     return (p.x + offset) + "," + (p.y + offset);
  91   }).join(' ')) + "' stroke='" + shape.points[0].color + "' stroke-linecap='round' stroke-width='" + shape.points[0].size + "' />";
  92 });
  93
  94 defineSVGRenderer('ErasedLinePath', function(shape) {
  95   return "";
  96 });
  97
  98 defineSVGRenderer('Polygon', function(shape) {
  99   if (shape.isClosed) {
 100     return "<polygon fill='" + shape.fillColor + "' points='" + (shape.points.map(function(p) {
 101       var offset;
 102       offset = p.strokeWidth % 2 === 0 ? 0.0 : 0.5;
 103       return (p.x + offset) + "," + (p.y + offset);
 104     }).join(' ')) + "' stroke='" + shape.strokeColor + "' stroke-width='" + shape.strokeWidth + "' />";
 105   } else {
 106     return "<polyline fill='" + shape.fillColor + "' points='" + (shape.points.map(function(p) {
 107       var offset;
 108       offset = p.strokeWidth % 2 === 0 ? 0.0 : 0.5;
 109       return (p.x + offset) + "," + (p.y + offset);
 110     }).join(' ')) + "' stroke='none' /> <polyline fill='none' points='" + (shape.points.map(function(p) {
 111       var offset;
 112       offset = p.strokeWidth % 2 === 0 ? 0.0 : 0.5;
 113       return (p.x + offset) + "," + (p.y + offset);
 114     }).join(' ')) + "' stroke='" + shape.strokeColor + "' stroke-width='" + shape.strokeWidth + "' />";
 115   }
 116 });
 117
 118 defineSVGRenderer('Text', function(shape) {
 119   var heightString, textSplitOnLines, widthString;
 120   widthString = shape.forcedWidth ? "width='" + shape.forcedWidth + "px'" : "";
 121   heightString = shape.forcedHeight ? "height='" + shape.forcedHeight + "px'" : "";
 122   textSplitOnLines = shape.text.split(/\r\n|\r|\n/g);
 123   if (shape.renderer) {
 124     textSplitOnLines = shape.renderer.lines;
 125   }
 126   return "<text x='" + shape.x + "' y='" + shape.y + "' " + widthString + " " + heightString + " fill='" + shape.color + "' style='font: " + shape.font + ";'> " + (textSplitOnLines.map((function(_this) {
 127     return function(line, i) {
 128       var dy;
 129       dy = i === 0 ? 0 : '1.2em';
 130       return "<tspan x='" + shape.x + "' dy='" + dy + "' alignment-baseline='text-before-edge'> " + line + " </tspan>";
 131     };
 132   })(this)).join('')) + " </text>";
 133 });
 134
 135 module.exports = {
 136   defineSVGRenderer: defineSVGRenderer,
 137   renderShapeToSVG: renderShapeToSVG
 138 };