/
SvgPathBindingHandler.js
76 lines (64 loc) · 2.98 KB
/
SvgPathBindingHandler.js
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
/*global define*/
define(function() {
"use strict";
var svgNS = 'http://www.w3.org/2000/svg';
var svgClassName = 'cesium-svgPath-svg';
/**
* A Knockout binding handler that creates a DOM element for a single SVG path.
* This binding handler will be registered as cesiumSvgPath.
*
* The parameter to this binding is an object with the following required properties:
*
* path: The SVG path as a string.
* width: The width of the SVG path with no transformations applied.
* height: The height of the SVG path with no transformations applied.
*
* and the following optional properties:
* css: A string containing additional CSS classes to apply to the SVG. 'cesium-svgPath-svg' is always applied.
*
* @exports SvgPathBindingHandler
*
* @example
* // Create an SVG as a child of a div
* <div data-bind="cesiumSvgPath: { path: 'M 100 100 L 300 100 L 200 300 z', width: 28, height: 28 }"></div>
*
* // parameters can be observable from the view model
* <div data-bind="cesiumSvgPath: { path: currentPath, width: currentWidth, height: currentHeight }"></div>
*
* // or the whole object can be observable from the view model
* <div data-bind="cesiumSvgPath: svgPathOptions"></div>
*/
var SvgPathBindingHandler = {
register : function(knockout) {
knockout.bindingHandlers.cesiumSvgPath = {
init : function(element, valueAccessor) {
var svg = document.createElementNS(svgNS, 'svg:svg');
svg.setAttribute('class', svgClassName);
var pathElement = document.createElementNS(svgNS, 'path');
svg.appendChild(pathElement);
knockout.virtualElements.setDomNodeChildren(element, [svg]);
knockout.computed({
read : function() {
var value = knockout.unwrap(valueAccessor());
pathElement.setAttribute('d', knockout.unwrap(value.path));
var pathWidth = knockout.unwrap(value.width);
var pathHeight = knockout.unwrap(value.height);
svg.setAttribute('width', pathWidth);
svg.setAttribute('height', pathHeight);
svg.setAttribute('viewBox', '0 0 ' + pathWidth + ' ' + pathHeight);
if (value.css) {
svg.setAttribute('class', svgClassName + ' ' + knockout.unwrap(value.css));
}
},
disposeWhenNodeIsRemoved : element
});
return {
controlsDescendantBindings : true
};
}
};
knockout.virtualElements.allowedBindings.cesiumSvgPath = true;
}
};
return SvgPathBindingHandler;
});