drawdown-svg-render
Version:
Svg renderer for drawdown diagrams
123 lines (99 loc) • 12.8 kB
JavaScript
;
'use babel';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TimelineRenderer = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _get = function get(object, property, receiver) { if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
var _d3Selection = require('d3-selection');
var _Renderer2 = require('./Renderer');
var _link = require('../helpers/link');
var _arrowLabel = require('../helpers/arrow-label');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var TimelineRenderer = exports.TimelineRenderer = function (_Renderer) {
_inherits(TimelineRenderer, _Renderer);
function TimelineRenderer() {
_classCallCheck(this, TimelineRenderer);
return _possibleConstructorReturn(this, (TimelineRenderer.__proto__ || Object.getPrototypeOf(TimelineRenderer)).apply(this, arguments));
}
_createClass(TimelineRenderer, [{
key: 'construct',
value: function construct(opts) {
_get(TimelineRenderer.prototype.__proto__ || Object.getPrototypeOf(TimelineRenderer.prototype), 'construct', this).call(this, opts);
}
}, {
key: 'onCreate',
value: function onCreate(svg, scene) {
this.updateLinks(scene);
this.updateTimeliens(scene);
this.onDidDragOrZoom(svg.node());
this.onDidRender(svg.node());
}
}, {
key: 'onBlockDrag',
value: function onBlockDrag(svg, scene) {
this.updateLinks(scene);
this.updateTimeliens(scene);
this.onDidDragOrZoom(svg.node());
}
}, {
key: 'updateLinks',
value: function updateLinks(scene) {
var yStart = 0; //Used only in links of type "MESSAGE"
scene.selectAll('.dd-block').each(function (d) {
var y = d.layout.pos.y + d.layout.h + 50;
yStart = Math.max(yStart, y);
});
scene.selectAll('.dd-link').each(function (d) {
var link = (0, _d3Selection.select)(this);
var tail = link.select('.dd-link-tail');
var leftHead = link.select('.dd-link-head-left');
var rightHead = link.select('.dd-link-head-right');
var label = link.select('.dd-link-label');
tail.attr('d', (0, _link.tailGenerator)(d.style, { yStart: yStart, ySeparation: 60 }));
rightHead.attr('d', _link.rightHead);
leftHead.attr('d', _link.leftHead);
(0, _arrowLabel.arrowLabel)(label, d, _Renderer2.PADDING);
});
}
}, {
key: 'updateTimeliens',
value: function updateTimeliens(scene) {
var yStart = 0; //Used only in links of type "MESSAGE"
scene.selectAll('.dd-timeline').each(function (d) {
var y = d.layout.pos.y + d.layout.h + 50;
yStart = Math.max(yStart, y);
});
var yEnd = scene.selectAll('.dd-link').nodes().length * 60 + yStart;
scene.selectAll('.dd-timeline').attr('x1', function (d) {
return d.layout.pos.x;
}).attr('y1', function (d) {
return d.layout.pos.y + d.layout.h / 2;
}).attr('x2', function (d) {
return d.layout.pos.x;
}).attr('y2', yEnd);
}
}, {
key: 'autoLayout',
value: function autoLayout(diagram) {
var layout = {
blocks: {}
};
console.log(diagram, _Renderer2.MIN_WIDTH, _Renderer2.PADDING);
diagram.blocks.forEach(function (block, index) {
layout.blocks[block.id] = {
pos: { x: (index + 1) * (_Renderer2.MIN_WIDTH + 4 * _Renderer2.PADDING), y: 30 },
w: _Renderer2.MIN_WIDTH,
h: 0,
links: { t: [], r: [], b: [], l: [] }
};
});
return layout;
}
}]);
return TimelineRenderer;
}(_Renderer2.Renderer);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9yZW5kZXJlci9UaW1lbGluZVJlbmRlcmVyLmpzIl0sIm5hbWVzIjpbIlRpbWVsaW5lUmVuZGVyZXIiLCJvcHRzIiwic3ZnIiwic2NlbmUiLCJ1cGRhdGVMaW5rcyIsInVwZGF0ZVRpbWVsaWVucyIsIm9uRGlkRHJhZ09yWm9vbSIsIm5vZGUiLCJvbkRpZFJlbmRlciIsInlTdGFydCIsInNlbGVjdEFsbCIsImVhY2giLCJkIiwieSIsImxheW91dCIsInBvcyIsImgiLCJNYXRoIiwibWF4IiwibGluayIsInRhaWwiLCJzZWxlY3QiLCJsZWZ0SGVhZCIsInJpZ2h0SGVhZCIsImxhYmVsIiwiYXR0ciIsInN0eWxlIiwieVNlcGFyYXRpb24iLCJsaW5rUmlnaHRIZWFkIiwibGlua0xlZnRIZWFkIiwiUEFERElORyIsInlFbmQiLCJub2RlcyIsImxlbmd0aCIsIngiLCJkaWFncmFtIiwiYmxvY2tzIiwiY29uc29sZSIsImxvZyIsIk1JTl9XSURUSCIsImZvckVhY2giLCJibG9jayIsImluZGV4IiwiaWQiLCJ3IiwibGlua3MiLCJ0IiwiciIsImIiLCJsIiwiUmVuZGVyZXIiXSwibWFwcGluZ3MiOiI7QUFBQTs7Ozs7Ozs7Ozs7QUFDQTs7QUFFQTs7QUFFQTs7QUFNQTs7Ozs7Ozs7SUFJYUEsZ0IsV0FBQUEsZ0I7Ozs7Ozs7Ozs7OzhCQUVEQyxJLEVBQU07QUFDZCxvSUFBZ0JBLElBQWhCO0FBQ0Q7Ozs2QkFFUUMsRyxFQUFLQyxLLEVBQU87QUFDbkIsV0FBS0MsV0FBTCxDQUFpQkQsS0FBakI7QUFDQSxXQUFLRSxlQUFMLENBQXFCRixLQUFyQjtBQUNBLFdBQUtHLGVBQUwsQ0FBcUJKLElBQUlLLElBQUosRUFBckI7QUFDQSxXQUFLQyxXQUFMLENBQWlCTixJQUFJSyxJQUFKLEVBQWpCO0FBQ0Q7OztnQ0FFV0wsRyxFQUFLQyxLLEVBQU87QUFDdEIsV0FBS0MsV0FBTCxDQUFpQkQsS0FBakI7QUFDQSxXQUFLRSxlQUFMLENBQXFCRixLQUFyQjtB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Q0FBQ1EsUUFBTSxDQUFQLEtBQVdILHVCQUFZLElBQUVULGtCQUF6QixDQUFKLEVBQXNDakIsR0FBRSxFQUF4QyxFQURtQjtBQUV4QitCLGFBQUdMLG9CQUZxQjtBQUd4QnZCLGFBQUcsQ0FIcUI7QUFJeEI2QixpQkFBTyxFQUFDQyxHQUFHLEVBQUosRUFBT0MsR0FBRyxFQUFWLEVBQWFDLEdBQUcsRUFBaEIsRUFBbUJDLEdBQUcsRUFBdEI7QUFKaUIsU0FBMUI7QUFNRCxPQVBEOztBQVNBLGFBQU9uQyxNQUFQO0FBQ0Q7Ozs7RUE5RW1Db0MsbUIiLCJmaWxlIjoiVGltZWxpbmVSZW5kZXJlci5qcyIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgYmFiZWwnO1xuaW1wb3J0IHsgc2VsZWN0IGFzIGQzc2VsZWN0IH0gZnJvbSAnZDMtc2VsZWN0aW9uJztcblxuaW1wb3J0IHsgUmVuZGVyZXIgfSBmcm9tICcuL1JlbmRlcmVyJztcblxuaW1wb3J0IHtcbiAgcmlnaHRIZWFkIGFzIGxpbmtSaWdodEhlYWQsXG4gIGxlZnRIZWFkIGFzIGxpbmtMZWZ0SGVhZCxcbiAgdGFpbEdlbmVyYXRvclxufSBmcm9tICcuLi9oZWxwZXJzL2xpbmsnO1xuXG5pbXBvcnQgeyBhcnJvd0xhYmVsIH0gZnJvbSAnLi4vaGVscGVycy9hcnJvdy1sYWJlbCdcbmltcG9ydCAgeyBQQURESU5HIH0gIGZyb20gJy4vUmVuZGVyZXInO1xuaW1wb3J0ICB7IE1JTl9XSURUSCB9IGZyb20gJy4vUmVuZGVyZXInO1xuXG5leHBvcnQgY2xhc3MgVGltZWxpbmVSZW5kZXJlciBleHRlbmRzIFJlbmRlcmVyIHtcblxuICBjb25zdHJ1Y3Qob3B0cykge1xuICAgIHN1cGVyLmNvbnN0cnVjdChvcHRzKVxuICB9XG5cbiAgb25DcmVhdGUoc3ZnLCBzY2VuZSkge1xuICAgIHRoaXMudXBkYXRlTGlua3Moc2NlbmUpO1xuICAgIHRoaXMudXBkYXRlVGltZWxpZW5zKHNjZW5lKTtcbiAgICB0aGlzLm9uRGlkRHJhZ09yWm9vbShzdmcubm9kZSgpKTtcbiAgICB0aGlzLm9uRGlkUmVuZGVyKHN2Zy5ub2RlKCkpO1xuICB9XG5cbiAgb25CbG9ja0RyYWcoc3ZnLCBzY2VuZSkge1xuICAgIHRoaXMudXBkYXRlTGlua3Moc2NlbmUpO1xuICAgIHRoaXMudXBkYXRlVGltZWxpZW5zKHNjZW5lKTtcbiAgICB0aGlzLm9uRGlkRHJhZ09yWm9vbShzdmcubm9kZSgpKVxuICB9XG5cbiAgdXBkYXRlTGlua3Moc2NlbmUpIHtcblxuICAgIGxldCB5U3RhcnQgPSAwOyAvL1VzZWQgb25seSBpbiBsaW5rcyBvZiB0eXBlIFwiTUVTU0FHRVwiXG5cbiAgICBzY2VuZS5zZWxlY3RBbGwoJy5kZC1ibG9jaycpLmVhY2goKGQpID0+IHtcbiAgICAgIGxldCB5ID0gZC5sYXlvdXQucG9zLnkgKyBkLmxheW91dC5oICsgNTA7XG4gICAgICB5U3RhcnQgPSBNYXRoLm1heCh5U3RhcnQsIHkpXG4gICAgfSk7XG5cbiAgICBzY2VuZS5zZWxlY3RBbGwoJy5kZC1saW5rJylcbiAgICAgIC5lYWNoKGZ1bmN0aW9uKGQpIHtcbiAgICAgICAgY29uc3QgbGluayA9IGQzc2VsZWN0KHRoaXMpO1xuICAgICAgICBjb25zdCB0YWlsID0gbGluay5zZWxlY3QoJy5kZC1saW5rLXRhaWwnKTtcbiAgICAgICAgY29uc3QgbGVmdEhlYWQgPSBsaW5rLnNlbGVjdCgnLmRkLWxpbmstaGVhZC1sZWZ0Jyk7XG4gICAgICAgIGNvbnN0IHJpZ2h0SGVhZCA9IGxpbmsuc2VsZWN0KCcuZGQtbGluay1oZWFkLXJpZ2h0Jyk7XG4gICAgICAgIGNvbnN0IGxhYmVsID0gbGluay5zZWxlY3QoJy5kZC1saW5rLWxhYmVsJyk7XG5cbiAgICAgICAgdGFpbC5hdHRyKCdkJywgdGFpbEdlbmVyYXRvcihkLnN0eWxlLCB7eVN0YXJ0OiB5U3RhcnQsIHlTZXBhcmF0aW9uOiA2MH0pKTtcbiAgICAgICAgcmlnaHRIZWFkLmF0dHIoJ2QnLCBsaW5rUmlnaHRIZWFkKTtcbiAgICAgICAgbGVmdEhlYWQuYXR0cignZCcsIGxpbmtMZWZ0SGVhZCk7XG5cbiAgICAgICAgYXJyb3dMYWJlbChsYWJlbCwgZCwgUEFERElORyk7XG4gICAgICB9KVxuICB9XG5cbiAgdXBkYXRlVGltZWxpZW5zKHNjZW5lKSB7XG4gICAgbGV0IHlTdGFydCA9IDA7IC8vVXNlZCBvbmx5IGluIGxpbmtzIG9mIHR5cGUgXCJNRVNTQUdFXCJcblxuICAgIHNjZW5lLnNlbGVjdEFsbCgnLmRkLXRpbWVsaW5lJykuZWFjaCgoZCkgPT4ge1xuICAgICAgbGV0IHkgPSBkLmxheW91dC5wb3MueSArIGQubGF5b3V0LmggKyA1MDtcbiAgICAgIHlTdGFydCA9IE1hdGgubWF4KHlTdGFydCwgeSlcbiAgICB9KTtcblxuXG4gICAgbGV0IHlFbmQgPSBzY2VuZS5zZWxlY3RBbGwoJy5kZC1saW5rJykubm9kZXMoKS5sZW5ndGggKiA2MCsgeVN0YXJ0O1xuXG4gICAgc2NlbmUuc2VsZWN0QWxsKCcuZGQtdGltZWxpbmUnKVxuICAgICAgLmF0dHIoJ3gxJywgZCA9PiBkLmxheW91dC5wb3MueClcbiAgICAgIC5hdHRyKCd5MScsIGQgPT4gIGQubGF5b3V0LnBvcy55ICsgZC5sYXlvdXQuaC8yKVxuICAgICAgLmF0dHIoJ3gyJywgZCA9PiAgZC5sYXlvdXQucG9zLngpXG4gICAgICAuYXR0cigneTInLCB5RW5kKVxuXG4gIH1cblxuICBhdXRvTGF5b3V0KGRpYWdyYW0pIHtcbiAgICBjb25zdCBsYXlvdXQgPSB7XG4gICAgICBibG9ja3M6IHt9XG4gICAgfVxuY29uc29sZS5sb2coZGlhZ3JhbSwgTUlOX1dJRFRILCBQQURESU5HKTtcbiAgICBkaWFncmFtLmJsb2Nrcy5mb3JFYWNoKChibG9jaywgaW5kZXgpID0+IHtcbiAgICAgIGxheW91dC5ibG9ja3NbYmxvY2suaWRdID0ge1xuICAgICAgICBwb3M6IHt4OiAoaW5kZXgrMSkqKE1JTl9XSURUSCArIDQqUEFERElORykseTozMH0sXG4gICAgICAgIHc6IE1JTl9XSURUSCxcbiAgICAgICAgaDogMCxcbiAgICAgICAgbGlua3M6IHt0OiBbXSxyOiBbXSxiOiBbXSxsOiBbXX1cbiAgICAgIH1cbiAgICB9KTtcblxuICAgIHJldHVybiBsYXlvdXQ7XG4gIH1cblxufVxuIl19