1 |
1e2b2c27
|
Tomáš Šimandl
|
|
2 |
|
|
/**
|
3 |
|
|
* This class represents creating and sorting of marks.
|
4 |
|
|
*/
|
5 |
|
|
function GridMarks() {
|
6 |
|
|
var CONST_COUNT_MARKS_ON_ROW = 5;
|
7 |
|
|
var CONST_WIDTH_MARK = 21;
|
8 |
|
|
var CONST_HEIGHT_MARK = 21;
|
9 |
|
|
|
10 |
|
|
var marks = new Hash();
|
11 |
|
|
var position = {
|
12 |
|
|
rx: -60,
|
13 |
|
|
ry: 13,
|
14 |
|
|
tx: -50,
|
15 |
|
|
ty: 23
|
16 |
|
|
};
|
17 |
|
|
|
18 |
|
|
/**
|
19 |
|
|
* Add mark to list.
|
20 |
|
|
*
|
21 |
|
|
* @param markId id of added mark
|
22 |
|
|
* @param mark mark with symbol and color
|
23 |
|
|
*/
|
24 |
|
|
this.addMark = function(markId, mark) {
|
25 |
|
|
if (mark.symbol != "undefined" || mark.symbol != "" || mark.symbol !== undefined) {
|
26 |
|
|
var translate = countTranslate(marks.size());
|
27 |
|
|
var markGroup = createMarkSvg(mark, position, translate);
|
28 |
|
|
|
29 |
|
|
marks.add(markId, {
|
30 |
|
|
mark: mark,
|
31 |
|
|
$markGroup: $(markGroup)
|
32 |
|
|
});
|
33 |
|
|
|
34 |
|
|
mark.$vertexSelector.append(markGroup);
|
35 |
|
|
}
|
36 |
|
|
};
|
37 |
|
|
|
38 |
|
|
/**
|
39 |
|
|
* Removes mark with given id from list.
|
40 |
|
|
*
|
41 |
|
|
* @param markId mark ID
|
42 |
|
|
*/
|
43 |
|
|
this.removeMark = function(markId) {
|
44 |
|
|
var item = marks.remove(markId).$markGroup;
|
45 |
|
|
item.remove();
|
46 |
|
|
|
47 |
|
|
reorganizeMarks();
|
48 |
|
|
};
|
49 |
|
|
|
50 |
|
|
/**
|
51 |
|
|
* Tests if mark with given id is in list of mark.
|
52 |
|
|
*
|
53 |
|
|
* @param markId mark ID
|
54 |
|
|
* @returns {*|boolean} If mark exists, it is returned
|
55 |
|
|
*/
|
56 |
|
|
this.existMark = function(markId) {
|
57 |
|
|
return marks.contains(markId);
|
58 |
|
|
};
|
59 |
|
|
|
60 |
|
|
/**
|
61 |
|
|
* Count translate of mark in grids.
|
62 |
|
|
*
|
63 |
|
|
* @param length length
|
64 |
|
|
* @returns {{x: number, y: number}} calculated x and y axes
|
65 |
|
|
*/
|
66 |
|
|
function countTranslate(length) {
|
67 |
|
|
return {
|
68 |
|
|
x: (length % CONST_COUNT_MARKS_ON_ROW) * CONST_WIDTH_MARK,
|
69 |
|
|
y: Math.floor(length / CONST_COUNT_MARKS_ON_ROW) * CONST_HEIGHT_MARK
|
70 |
|
|
};
|
71 |
|
|
}
|
72 |
|
|
|
73 |
|
|
/**
|
74 |
|
|
* This method organized marks in grid.
|
75 |
|
|
*/
|
76 |
|
|
function reorganizeMarks() {
|
77 |
|
|
var countMark = 0;
|
78 |
|
|
for (var key in marks.getAll()) {
|
79 |
|
|
if (marks.getAll().hasOwnProperty(key)) {
|
80 |
|
|
marks.get(key).$markGroup.remove();
|
81 |
|
|
|
82 |
|
|
var translate = countTranslate(countMark);
|
83 |
|
|
var markGroup = createMarkSvg(marks.get(key).mark, position, translate);
|
84 |
|
|
|
85 |
|
|
marks.get(key).$markGroup = $(markGroup);
|
86 |
|
|
marks.get(key).mark.$vertexSelector.append(markGroup);
|
87 |
|
|
|
88 |
|
|
countMark++;
|
89 |
|
|
}
|
90 |
|
|
}
|
91 |
|
|
}
|
92 |
|
|
|
93 |
|
|
/**
|
94 |
|
|
* Create svg element which represents mark in graph.
|
95 |
|
|
*
|
96 |
|
|
* @param mark mark
|
97 |
|
|
* @param position mark position
|
98 |
|
|
* @param translate translate
|
99 |
|
|
* @returns {*} group
|
100 |
|
|
*/
|
101 |
|
|
function createMarkSvg(mark, position, translate) {
|
102 |
|
|
var group = createSvgElement('g', {
|
103 |
|
|
'class': mark.id,
|
104 |
|
|
'transform': 'translate(' + (translate.x) + ',' + translate.y + ')'
|
105 |
|
|
});
|
106 |
|
|
|
107 |
|
|
var rect = createSvgElement('rect', {
|
108 |
|
|
rx: 4,
|
109 |
|
|
ry: 4,
|
110 |
|
|
height: CONST_HEIGHT_MARK,
|
111 |
|
|
width: CONST_WIDTH_MARK,
|
112 |
|
|
// x: position['rx'],
|
113 |
|
|
// y: position['ry'],
|
114 |
|
|
y: 2 * position['ry'],
|
115 |
|
|
stroke: 'black',
|
116 |
|
|
fill: mark.symbol[1]
|
117 |
|
|
});
|
118 |
|
|
|
119 |
|
|
var label = createSvgElement('text', {
|
120 |
|
|
'x': 10,
|
121 |
|
|
'y': position['ty'] + 13,
|
122 |
|
|
'fill': 'black',
|
123 |
|
|
});
|
124 |
|
|
|
125 |
|
|
var myText = document.createTextNode(mark.symbol[0]);
|
126 |
|
|
|
127 |
|
|
label.appendChild(myText);
|
128 |
|
|
group.appendChild(rect);
|
129 |
|
|
group.appendChild(label);
|
130 |
|
|
|
131 |
|
|
return group;
|
132 |
|
|
}
|
133 |
|
|
}
|