Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 892x 892x 892x 892x 892x 892x 892x 892x 892x 892x 892x 892x 892x 892x 251x 892x 1x | const svgNS = "http://www.w3.org/2000/svg";
const 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.
*
* <p>
* The parameter to this binding is an object with the following properties:
* </p>
*
* <ul>
* <li>path: The SVG path as a string.</li>
* <li>width: The width of the SVG path with no transformations applied.</li>
* <li>height: The height of the SVG path with no transformations applied.</li>
* <li>css: Optional. A string containing additional CSS classes to apply to the SVG. 'cesium-svgPath-svg' is always applied.</li>
* </ul>
*
* @namespace 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>
*/
const SvgPathBindingHandler = {
/**
* @function
*/
register: function (knockout) {
knockout.bindingHandlers.cesiumSvgPath = {
init: function (element, valueAccessor) {
const svg = document.createElementNS(svgNS, "svg:svg");
svg.setAttribute("class", svgClassName);
const pathElement = document.createElementNS(svgNS, "path");
svg.appendChild(pathElement);
knockout.virtualElements.setDomNodeChildren(element, [svg]);
knockout.computed({
read: function () {
const value = knockout.unwrap(valueAccessor());
pathElement.setAttribute("d", knockout.unwrap(value.path));
const pathWidth = knockout.unwrap(value.width);
const 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;
},
};
export default SvgPathBindingHandler;
|