audrius/web
1
0
Fork 1
mirror of https://github.com/OCA/web.git synced 2025-02-22 13:21:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[MIG] web_timeline: Migration to 12.0

Browse Source
This commit is contained in:
tarteo
2018-10-23 11:27:20 +02:00
committed by CarlosRoca13
parent 990ef1868f
commit 2ffcacd690
13 changed files with 1111 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web_timeline/static/src/js/timeline_canvas.js
View File

@@ -5,14 +5,37 @@ odoo.define('web_timeline.TimelineCanvas', function (require) {
"use strict";
var Widget = require('web.Widget');
/**
* Used to draw stuff on upon the timeline view.
*/
var TimelineCanvas = Widget.extend({
template: 'TimelineView.Canvas',
clear: function() {
/**
* Clears all drawings (svg elements) from the canvas.
*/
clear: function () {
this.$el.find(' > :not(defs)').remove();
},
get_polyline_points: function(coordx1, coordy1, coordx2, coordy2, width1, height1, width2, height2, widthMarker, breakAt) {
/**
* Gets the path from one point to another.
*
* @param {Number} coordx1
* @param {Number} coordy1
* @param {Number} coordx2
* @param {Number} coordy2
* @param {Number} width1
* @param {Number} height1
* @param {Number} width2
* @param {Number} height2
* @param {Number} widthMarker The marker's width of the polyline
* @param {Number} breakAt The space between the line turns
* @returns {Array} Each item represents a coordinate
*/
get_polyline_points: function (coordx1, coordy1, coordx2, coordy2,
width1, height1, width2, height2,
widthMarker, breakAt) {
var halfHeight1 = height1 / 2;
var halfHeight2 = height2 / 2;
var x1 = coordx1 - widthMarker;
@@ -37,21 +60,42 @@ odoo.define('web_timeline.TimelineCanvas', function (require) {
points.push([x2 + breakAt, y2]);
}
} else if(x1 < x2) {
points.push([x1 - breakAt, y1]);
points.push([x1 - breakAt, y1 + spaceY]);
points.push([x2 + breakAt, y2 + spaceY]);
points.push([x2 + breakAt, y2]);
points.push([x1 - breakAt, y1]);
points.push([x1 - breakAt, y1 + spaceY]);
points.push([x2 + breakAt, y2 + spaceY]);
points.push([x2 + breakAt, y2]);
}
points.push([x2, y2]);
return points;
},
draw_arrow: function(from, to, color, width) {
/**
* Draws an arrow.
*
* @param {HTMLElement} from Element to draw the arrow from
* @param {HTMLElement} to Element to draw the arrow to
* @param {String} color Color of the line
* @param {Number} width Width of the line
* @returns {HTMLElement} The created SVG polyline
*/
draw_arrow: function (from, to, color, width) {
return this.draw_line(from, to, color, width, '#arrowhead', 10, 12);
},
draw_line: function(from, to, color, width, markerStart, widthMarker, breakLineAt) {
/**
* Draws a line.
*
* @param {HTMLElement} from Element to draw the line from
* @param {HTMLElement} to Element to draw the line to
* @param {String} color Color of the line
* @param {Number} width Width of the line
* @param {String} markerStart Start marker of the line
* @param {Number} widthMarker The marker's width of the polyline
* @param {Number} breakLineAt The space between the line turns
* @returns {HTMLElement} The created SVG polyline
*/
draw_line: function (from, to, color, width, markerStart, widthMarker, breakLineAt) {
var x1 = from.offsetLeft,
y1 = from.offsetTop + from.parentElement.offsetTop,
x2 = to.offsetLeft,
@@ -81,8 +125,7 @@ odoo.define('web_timeline.TimelineCanvas', function (require) {
}
this.$el.append(line);
return line;
}
},
});
return TimelineCanvas;