gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 import inherits from 'inherits';
   2
   3 import BaseRenderer from 'diagram-js/lib/draw/BaseRenderer';
   4
   5 import { componentsToPath, createLine } from 'diagram-js/lib/util/RenderUtil';
   6
   7 import {
   8     append as svgAppend,
   9     attr as svgAttr,
  10     create as svgCreate
  11 } from 'tiny-svg';
  12
  13 /**
  14  * A renderer that knows how to render custom elements.
  15  */
  16 export default function CustomRenderer(eventBus, styles) {
  17     BaseRenderer.call(this, eventBus, 2000);
  18
  19     var computeStyle = styles.computeStyle;
  20
  21     this.drawTriangle = function(p, side) {
  22         var halfSide = side / 2,
  23             points,
  24             attrs;
  25
  26         points = [halfSide, 0, side, side, 0, side];
  27
  28         attrs = computeStyle(attrs, {
  29             stroke: '#3CAA82',
  30             strokeWidth: 2,
  31             fill: '#3CAA82'
  32         });
  33
  34         var polygon = svgCreate('polygon');
  35
  36         svgAttr(polygon, {
  37             points: points
  38         });
  39
  40         svgAttr(polygon, attrs);
  41
  42         svgAppend(p, polygon);
  43
  44         return polygon;
  45     };
  46
  47     this.getTrianglePath = function(element) {
  48         var x = element.x,
  49             y = element.y,
  50             width = element.width,
  51             height = element.height;
  52
  53         var trianglePath = [
  54             ['M', x + width / 2, y],
  55             ['l', width / 2, height],
  56             ['l', -width, 0],
  57             ['z']
  58         ];
  59
  60         return componentsToPath(trianglePath);
  61     };
  62
  63     this.drawCircle = function(p, width, height) {
  64         var cx = width / 2,
  65             cy = height / 2;
  66
  67         var attrs = computeStyle(attrs, {
  68             stroke: '#4488aa',
  69             strokeWidth: 4,
  70             fill: 'white'
  71         });
  72
  73         var circle = svgCreate('circle');
  74
  75         svgAttr(circle, {
  76             cx: cx,
  77             cy: cy,
  78             r: Math.round((width + height) / 4)
  79         });
  80
  81         svgAttr(circle, attrs);
  82
  83         svgAppend(p, circle);
  84
  85         return circle;
  86     };
  87
  88     this.getCirclePath = function(shape) {
  89         var cx = shape.x + shape.width / 2,
  90             cy = shape.y + shape.height / 2,
  91             radius = shape.width / 2;
  92
  93         var circlePath = [
  94             ['M', cx, cy],
  95             ['m', 0, -radius],
  96             ['a', radius, radius, 0, 1, 1, 0, 2 * radius],
  97             ['a', radius, radius, 0, 1, 1, 0, -2 * radius],
  98             ['z']
  99         ];
 100
 101         return componentsToPath(circlePath);
 102     };
 103
 104     this.drawCustomConnection = function(p, element) {
 105         var attrs = computeStyle(attrs, {
 106             stroke: '#ff471a',
 107             strokeWidth: 2
 108         });
 109
 110         return svgAppend(p, createLine(element.waypoints, attrs));
 111     };
 112
 113     this.getCustomConnectionPath = function(connection) {
 114         var waypoints = connection.waypoints.map(function(p) {
 115             return p.original || p;
 116         });
 117
 118         var connectionPath = [['M', waypoints[0].x, waypoints[0].y]];
 119
 120         waypoints.forEach(function(waypoint, index) {
 121             if (index !== 0) {
 122                 connectionPath.push(['L', waypoint.x, waypoint.y]);
 123             }
 124         });
 125
 126         return componentsToPath(connectionPath);
 127     };
 128 }
 129
 130 inherits(CustomRenderer, BaseRenderer);
 131
 132 CustomRenderer.$inject = ['eventBus', 'styles'];
 133
 134 CustomRenderer.prototype.canRender = function(element) {
 135     return /^custom:/.test(element.type);
 136 };
 137
 138 CustomRenderer.prototype.drawShape = function(p, element) {
 139     var type = element.type;
 140
 141     if (type === 'custom:triangle') {
 142         return this.drawTriangle(p, element.width);
 143     }
 144
 145     if (type === 'custom:circle') {
 146         return this.drawCircle(p, element.width, element.height);
 147     }
 148 };
 149
 150 CustomRenderer.prototype.getShapePath = function(shape) {
 151     var type = shape.type;
 152
 153     if (type === 'custom:triangle') {
 154         return this.getTrianglePath(shape);
 155     }
 156
 157     if (type === 'custom:circle') {
 158         return this.getCirclePath(shape);
 159     }
 160 };
 161
 162 CustomRenderer.prototype.drawConnection = function(p, element) {
 163     var type = element.type;
 164
 165     if (type === 'custom:connection') {
 166         return this.drawCustomConnection(p, element);
 167     }
 168 };
 169
 170 CustomRenderer.prototype.getConnectionPath = function(connection) {
 171     var type = connection.type;
 172
 173     if (type === 'custom:connection') {
 174         return this.getCustomConnectionPath(connection);
 175     }
 176 };