| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154 | 1×
1×
1×
26×
26×
26×
26×
1×
1×
52×
52×
52×
52×
52×
52×
52×
52×
52×
52×
52×
52×
52×
52×
52×
52×
52×
1×
1×
513×
513×
513×
134×
134×
134×
134×
134×
134×
379×
1×
1×
1663×
1663×
1663×
1×
1×
8482×
8482×
8482×
1036×
1036×
8482×
1×
1×
320×
320×
320×
320×
320×
2×
320×
164×
320×
8×
320×
1×
1×
63×
63×
63×
63×
1×
2×
2×
2×
1×
1×
1926×
13×
13×
1×
1×
268×
268×
268×
268×
268×
268×
268×
268×
268×
268×
268×
268×
134×
134×
1×
268×
268×
268×
268×
268×
1×
268×
268×
268×
268×
268×
268×
268×
268×
| define(["require", "exports", "../utility/dom-util", "../../ruler/index", "../primitives/size", "../utility/base-util"], function (require, exports, dom_util_1, index_1, size_1, base_util_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function renderOverlapElement(diagram) {
var rulerSize = getRulerSize(diagram);
var attributes = {
'id': diagram.element.id + '_overlapRuler',
style: 'height:' + rulerSize.height + 'px;width:' + rulerSize.width + 'px;position:absolute;left:0;top:0',
class: 'e-ruler-overlap'
};
var overlap = dom_util_1.createHtmlElement('div', attributes);
diagram.element.insertBefore(overlap, diagram.element.firstChild);
}
exports.renderOverlapElement = renderOverlapElement;
function renderRuler(diagram, isHorizontal) {
var div = document.getElementById(diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));
var rulerSize = getRulerSize(diagram);
var rulerGeometry = getRulerGeometry(diagram);
var margin = isHorizontal ? ('margin-left:' + rulerSize.width + 'px;') : ('margin-top:' + rulerSize.height + 'px;');
Eif (!div) {
var style = 'height:' + (isHorizontal ? rulerSize.height : (rulerGeometry.height + 100)) + 'px;overflow:hidden;width:' +
(isHorizontal ? (rulerGeometry.width + 100) : rulerSize.width) + 'px;position:absolute;font-size:11px;' + margin;
var attributes = {
'id': diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'),
style: style
};
div = dom_util_1.createHtmlElement('div', attributes);
}
diagram.element.insertBefore(div, diagram.element.firstChild);
var diagramRuler = isHorizontal ? diagram.rulerSettings.horizontalRuler : diagram.rulerSettings.verticalRuler;
var ruler = new index_1.Ruler(diagramRuler);
ruler.orientation = isHorizontal ? 'Horizontal' : 'Vertical';
ruler.length = (isHorizontal ? rulerGeometry.width : rulerGeometry.height) + diagramRuler.segmentWidth;
ruler.appendTo('#' + diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));
isHorizontal ? diagram.hRuler = ruler : diagram.vRuler = ruler;
var rulerObj = document.getElementById(diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));
isHorizontal ? diagram.hRuler.element = rulerObj : diagram.vRuler.element = rulerObj;
}
exports.renderRuler = renderRuler;
function updateRuler(diagram) {
var hOffset = -diagram.scroller.horizontalOffset;
var vOffset = -diagram.scroller.verticalOffset;
if (diagram && diagram.rulerSettings.showRulers) {
diagram.hRuler.length = 0;
diagram.vRuler.length = 0;
Eif (hOffset !== undefined && diagram.hRuler.element) {
updateRulerDimension(diagram, diagram.hRuler, hOffset, true);
}
Eif (vOffset !== undefined && diagram.vRuler.element) {
updateRulerDimension(diagram, diagram.vRuler, vOffset, false);
}
}
else {
removeRulerElements(diagram);
}
}
exports.updateRuler = updateRuler;
function removeRulerElements(diagram) {
dom_util_1.removeElement(diagram.element.id + '_hRuler');
dom_util_1.removeElement(diagram.element.id + '_vRuler');
dom_util_1.removeElement(diagram.element.id + '_overlapRuler');
}
exports.removeRulerElements = removeRulerElements;
function getRulerSize(diagram) {
var top = 0;
var left = 0;
if (diagram.rulerSettings.showRulers) {
top = diagram.rulerSettings.horizontalRuler.thickness;
left = diagram.rulerSettings.verticalRuler.thickness;
}
return new size_1.Size(left, top);
}
exports.getRulerSize = getRulerSize;
function getRulerGeometry(diagram) {
var rulerSize = getRulerSize(diagram);
var height = diagram.scroller.viewPortHeight;
var width = diagram.scroller.viewPortWidth;
Iif (width < diagram.element.clientWidth - rulerSize.width) {
width = diagram.element.clientWidth - rulerSize.width;
}
if (height < diagram.element.clientHeight - rulerSize.height) {
height = diagram.element.clientHeight - rulerSize.height;
}
if (diagram.hRuler && diagram.hRuler.length) {
width = diagram.hRuler.length;
}
if (diagram.vRuler && diagram.vRuler.length) {
height = diagram.vRuler.length;
}
return new size_1.Size(width, height);
}
exports.getRulerGeometry = getRulerGeometry;
function removeRulerMarkers() {
var markers = document.getElementsByClassName('e-d-ruler-marker');
var marker;
var i;
if (markers && markers.length > 0) {
for (i = markers.length - 1; i >= 0; i--) {
marker = markers[parseInt(i.toString(), 10)];
Eif (marker) {
marker.parentNode.removeChild(marker);
}
}
}
}
exports.removeRulerMarkers = removeRulerMarkers;
function drawRulerMarkers(diagram, currentPoint) {
if (diagram.rulerSettings.showRulers) {
diagram.hRuler.drawRulerMarker(diagram.hRuler.element, currentPoint, diagram.scroller.horizontalOffset);
diagram.vRuler.drawRulerMarker(diagram.vRuler.element, currentPoint, diagram.scroller.verticalOffset);
}
}
exports.drawRulerMarkers = drawRulerMarkers;
function updateRulerDimension(diagram, ruler, offset, isHorizontal) {
var rulerSize = getRulerSize(diagram);
var rulerGeometry = getRulerGeometry(diagram);
var diagramRuler = isHorizontal ? diagram.rulerSettings.horizontalRuler : diagram.rulerSettings.verticalRuler;
updateRulerDiv(diagram, rulerGeometry, isHorizontal);
updateRulerSpace(diagram, rulerGeometry, isHorizontal);
ruler.offset = offset;
ruler.scale = diagram.scroller.currentZoom;
ruler.length = (isHorizontal ? rulerGeometry.width : rulerGeometry.height) + 100;
ruler.arrangeTick = base_util_1.getFunction(diagramRuler.arrangeTick);
ruler.dataBind();
var rulerObj = isHorizontal ? diagram.hRuler.element : diagram.vRuler.element;
if (isHorizontal) {
rulerObj.style.marginLeft = (rulerSize.width - ruler.hRulerOffset) + 'px';
}
else {
rulerObj.style.marginTop = (rulerSize.height - ruler.vRulerOffset) + 'px';
}
}
function updateRulerSpace(diagram, rulerGeometry, isHorizontal) {
var div = document.getElementById(diagram.element.id + (isHorizontal ? '_hRuler_ruler_space' : '_vRuler_ruler_space'));
var ruler = isHorizontal ? diagram.hRuler : diagram.vRuler;
Eif (div && diagram && rulerGeometry) {
div.style.width = (isHorizontal ? (rulerGeometry.width + (ruler.segmentWidth * 2)) : ruler.thickness) + 'px';
div.style.height = (isHorizontal ? ruler.thickness : (rulerGeometry.height + (ruler.segmentWidth * 2))) + 'px';
}
}
function updateRulerDiv(diagram, rulerGeometry, isHorizontal) {
var div = document.getElementById(diagram.element.id + (isHorizontal ? '_hRuler' : '_vRuler'));
var ruler = isHorizontal ? diagram.hRuler : diagram.vRuler;
Eif (div && diagram && rulerGeometry) {
div.style.width = (isHorizontal ? (rulerGeometry.width + ruler.segmentWidth) : ruler.thickness) + 'px';
div.style.height = (isHorizontal ? ruler.thickness : (rulerGeometry.height + ruler.segmentWidth)) + 'px';
div = document.getElementById(diagram.element.id + '_overlapRuler');
Eif (div) {
isHorizontal ? (div.style.height = ruler.thickness + 'px') : (div.style.width = ruler.thickness + 'px');
}
}
}
});
|