| 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 | 1×
1×
1×
97×
97×
97×
97×
1×
1×
1×
1×
97×
97×
97×
97×
97×
97×
97×
97×
97×
97×
97×
1×
97×
97×
97×
1×
97×
97×
97×
97×
97×
97×
97×
97×
1×
130×
130×
130×
130×
130×
1×
97×
97×
97×
97×
1×
97×
97×
97×
97×
97×
97×
97×
97×
97×
97×
97×
97×
97×
97×
97×
1×
97×
97×
97×
97×
97×
97×
97×
97×
97×
582×
582×
582×
582×
582×
582×
97×
1×
1×
| define(["require", "exports", "../utils/helper"], function (require, exports, helper_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function createScrollSvg(scrollbar, renderer) {
var rect = scrollbar.axis.rect;
var isHorizontalAxis = scrollbar.axis.orientation === 'Horizontal';
scrollbar.svgObject = renderer.createSvg({
id: 'scrollBar_svg' + scrollbar.axis.name,
width: scrollbar.isVertical ? scrollbar.height : scrollbar.width,
height: scrollbar.isVertical ? scrollbar.width : scrollbar.height,
style: 'position: absolute;top: ' + ((scrollbar.axis.opposedPosition && isHorizontalAxis ? -16 : 0) + rect.y) + 'px;left: ' +
(((scrollbar.axis.opposedPosition && !isHorizontalAxis ? 16 : 0) + rect.x) - (scrollbar.isVertical ? scrollbar.height : 0))
+ 'px;cursor:auto;'
});
scrollbar.elements.push(scrollbar.svgObject);
}
exports.createScrollSvg = createScrollSvg;
var ScrollElements = (function () {
function ScrollElements() {
}
ScrollElements.prototype.renderElements = function (scroll, renderer) {
var scrollGroup = renderer.createGroup({
id: 'scrollBar_' + scroll.axis.name,
transform: 'translate(' + (scroll.isVertical ? scroll.height : '0') +
',0) rotate(' + (scroll.isVertical ? '90' : '0') + ')'
});
var backRectGroup = renderer.createGroup({
id: 'scrollBar_backRect_' + scroll.axis.name
});
var thumbGroup = renderer.createGroup({
id: 'scrollBar_thumb_' + scroll.axis.name,
transform: 'translate(0,0)'
});
this.backRect(scroll, renderer, backRectGroup);
this.thumb(scroll, renderer, thumbGroup);
this.renderCircle(scroll, renderer, thumbGroup);
this.arrows(scroll, renderer, thumbGroup);
this.thumbGrip(scroll, renderer, thumbGroup);
scrollGroup.appendChild(backRectGroup);
scrollGroup.appendChild(thumbGroup);
return scrollGroup;
};
ScrollElements.prototype.backRect = function (scroll, renderer, parent) {
var style = scroll.scrollbarThemeStyle;
var backRectEle = renderer.drawRectangle(new helper_1.RectOption('scrollBarBackRect_' + scroll.axis.name, style.backRect, { width: 1, color: style.backRect }, 1, new helper_1.Rect(0, 0, scroll.width, scroll.height), 0, 0));
parent.appendChild(backRectEle);
};
ScrollElements.prototype.arrows = function (scroll, renderer, parent) {
var style = scroll.scrollbarThemeStyle;
var option = new helper_1.PathOption('scrollBar_leftArrow_' + scroll.axis.name, style.arrow, 1, style.arrow, 1, '', '');
this.leftArrowEle = renderer.drawPath(option);
option.id = 'scrollBar_rightArrow_' + scroll.axis.name;
this.rightArrowEle = renderer.drawPath(option);
this.setArrowDirection(this.thumbRectX, this.thumbRectWidth, scroll.height);
parent.appendChild(this.leftArrowEle);
parent.appendChild(this.rightArrowEle);
};
ScrollElements.prototype.setArrowDirection = function (thumbRectX, thumbRectWidth, height) {
var circleRadius = 8;
var leftDirection = 'M ' + ((thumbRectX - circleRadius / 2) + 1) + ' ' + (height / 2) + ' ' + 'L ' +
(thumbRectX - circleRadius / 2 + 6) + ' ' + 11 + ' ' + 'L ' + (thumbRectX - circleRadius / 2 + 6) + ' ' + 5 + ' Z';
var rightDirection = 'M ' + ((thumbRectX + thumbRectWidth + circleRadius / 2) - 0.5) + ' ' + (height / 2)
+ ' ' + 'L ' + (thumbRectX + thumbRectWidth + circleRadius / 2 - 6) + ' ' + 11.5 + ' ' + 'L ' + (thumbRectX +
thumbRectWidth + circleRadius / 2 - 6) + ' ' + 4.5 + ' Z';
this.leftArrowEle.setAttribute('d', leftDirection);
this.rightArrowEle.setAttribute('d', rightDirection);
};
ScrollElements.prototype.thumb = function (scroll, renderer, parent) {
scroll.startX = this.thumbRectX;
var style = scroll.scrollbarThemeStyle;
this.slider = renderer.drawRectangle(new helper_1.RectOption('scrollBarThumb_' + scroll.axis.name, style.thumb, { width: 1, color: '' }, 1, new helper_1.Rect(this.thumbRectX, 0, this.thumbRectWidth, scroll.height)));
parent.appendChild(this.slider);
};
ScrollElements.prototype.renderCircle = function (scroll, renderer, parent) {
var style = scroll.scrollbarThemeStyle;
var option = new helper_1.CircleOption('scrollBar_leftCircle_' + scroll.axis.name, style.circle, { width: 1, color: style.circle }, 1, this.thumbRectX, scroll.height / 2, 8);
var scrollShadowEle = '<filter x="-25.0%" y="-20.0%" width="150.0%" height="150.0%" filterUnits="objectBoundingBox"' +
'id="scrollbar_shadow"><feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>' +
'<feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>' +
'<feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>' +
'<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" type="matrix" in="shadowBlurOuter1">' +
'</feColorMatrix></filter>';
var defElement = renderer.createDefs();
defElement.innerHTML = scrollShadowEle;
var shadowGroup = renderer.createGroup({
id: scroll.axis.name + '_thumb_shadow'
});
shadowGroup.innerHTML = '<use fill="black" fill-opacity="1" filter="url(#scrollbar_shadow)" xlink:href="#' + 'scrollBar_leftCircle_'
+ scroll.axis.name + '"></use><use fill="black" fill-opacity="1" filter="url(#scrollbar_shadow)" xlink:href="#'
+ 'scrollBar_rightCircle_' + scroll.axis.name + '"></use>';
this.leftCircleEle = renderer.drawCircle(option);
option.id = 'scrollBar_rightCircle_' + scroll.axis.name;
option.cx = this.thumbRectX + this.thumbRectWidth;
this.rightCircleEle = renderer.drawCircle(option);
parent.appendChild(defElement);
parent.appendChild(this.leftCircleEle);
parent.appendChild(this.rightCircleEle);
parent.appendChild(shadowGroup);
};
ScrollElements.prototype.thumbGrip = function (scroll, renderer, parent) {
var sidePadding = 0;
var topPadding = 0;
var gripWidth = 14;
var gripCircleDiameter = 2;
var padding = gripWidth / 2 - gripCircleDiameter;
var style = scroll.scrollbarThemeStyle;
var option = new helper_1.CircleOption('scrollBar_gripCircle0' + '_' + scroll.axis.name, style.grip, { width: 1, color: style.grip }, 1, 0, 0, 1);
this.gripCircle = renderer.createGroup({
id: 'scrollBar_gripCircle_' + scroll.axis.name,
transform: 'translate(' + ((this.thumbRectX + this.thumbRectWidth / 2) + ((scroll.isVertical ? 1 : -1) * padding)) +
',' + (scroll.isVertical ? '10' : '5') + ') rotate(' + (scroll.isVertical ? '180' : '0') + ')'
});
for (var i = 1; i <= 6; i++) {
option.id = 'scrollBar_gripCircle' + i + '_' + scroll.axis.name;
option.cx = sidePadding;
option.cy = topPadding;
this.gripCircle.appendChild(renderer.drawCircle(option));
sidePadding = i === 3 ? 0 : (sidePadding + 5);
topPadding = i >= 3 ? 5 : 0;
}
parent.appendChild(this.gripCircle);
};
return ScrollElements;
}());
exports.ScrollElements = ScrollElements;
});
|