@sswroom/sswr 1.6.19 → 1.6.20

package/Changelog

@@ -1,3 +1,8 @@
+1.6.20
+-Enhance XLSXExporter
+-Added leaflet/EasyPrint.js
+-Added domtoimage/index.js
+
 1.6.19
 -data.Timestamp.fromTicks support floating point ticks
 -data.Duration.fromTicks support floating point ticks

package/cesium.js

@@ -1,8 +1,9 @@
 import * as data from "./data.js";
+import * as geometry from "./geometry.js";
 import * as kml from "./kml.js";
 import * as map from "./map.js";
 import * as math from "./math.js";
-import * as geometry from "./geometry.js";
+import * as text from "./text.js";
 
 export function screenToLatLon(viewer, x, y, ellipsoid)
 {

package/domtoimage/fontFaces.js

@@ -0,0 +1,56 @@
+import * as util from "./util.js";
+import * as inliner from "./inliner.js";
+
+export function resolveAll() {
+	return readAll()
+		.then(function (webFonts) {
+			return Promise.all(
+				webFonts.map(function (webFont) {
+					return webFont.resolve();
+				})
+			);
+		})
+		.then(function (cssStrings) {
+			return cssStrings.join('\n');
+		});
+}
+
+/**
+ * @param {{ cacheBust: boolean; imagePlaceholder?: string; } | undefined} [implOptions]
+ */
+async function readAll(implOptions) {
+	let styleSheets = [];
+	for (let i = 0; i < document.styleSheets.length; i++) styleSheets.push(document.styleSheets[i]);
+	let cssRules = [];
+	styleSheets.forEach(function (sheet) {
+		try {
+			if (sheet.cssRules)
+			{
+				for (let i = 0; i < sheet.cssRules.length; i++) cssRules.push(sheet.cssRules[i]);
+			}
+		} catch (e) {
+			console.log('Error while reading CSS rules from ' + sheet.href, e.toString());
+		}
+	});
+	/**  @type {CSSRule[]} */
+	let rules = cssRules
+	.filter(function (rule) {
+		return rule.type === CSSRule.FONT_FACE_RULE;
+	})
+	.filter(function (rule) {
+		return inliner.shouldProcess(rule.style.getPropertyValue('src'));
+	});
+	return rules.map((webFontRule) => {
+		return {
+			resolve: function resolve() {
+				let baseUrl = (webFontRule.parentStyleSheet || {}).href;
+				return inliner.inlineAll(webFontRule.cssText, baseUrl, undefined, implOptions);
+			},
+			src: function () {
+				// @ts-ignore
+				return webFontRule.style.getPropertyValue('src');
+			}
+		};
+	});
+}
+

package/domtoimage/images.js

@@ -0,0 +1,47 @@
+import * as util from "./util.js";
+import * as inliner from "./inliner.js";
+
+/**
+ * @param {HTMLImageElement} element
+ * @param {{ cacheBust: boolean; imagePlaceholder?: string; } | undefined} [options]
+ * @returns {Promise<HTMLImageElement>}
+ */
+async function inline(element, options) {
+	if (util.isDataUrl(element.src)) return element;
+	let data = await util.getAndEncode(element.src, options);
+	let dataUrl = util.dataAsUrl(data, util.mimeType(element.src));
+	return await new Promise(function (resolve, reject) {
+		element.onload = () => {resolve(element);};
+		element.onerror = reject;
+		element.src = dataUrl;
+	});
+}
+
+/**
+ * @param {HTMLElement} node
+ * @param {{ cacheBust: boolean; imagePlaceholder?: string; } | undefined} options
+ */
+export async function inlineAll(node, options) {
+	if (!(node instanceof HTMLElement)) return node;
+	let background = node.style.getPropertyValue('background');
+
+	if (!background) return node;
+
+	let inlined = await inliner.inlineAll(background, undefined, undefined, options)
+	node.style.setProperty(
+		'background',
+		inlined,
+		node.style.getPropertyPriority('background'));
+	if (node instanceof HTMLImageElement)
+		return await inline(node);
+	else
+	{
+		let children = util.asArray(node.childNodes);
+		let leng = children.length;
+		for (let i = 0; i < leng; i++)
+		{
+			node.replaceChild(children[i], await inlineAll(children[i], options));
+		}
+		return node;
+	}
+}

package/domtoimage/index.js

@@ -0,0 +1,328 @@
+import * as util from "./util.js";
+import * as images from "./images.js";
+import * as fontFaces from "./fontFaces.js";
+
+// Default impl options
+const defaultOptions = {
+	// Default is to fail on error, no placeholder
+	imagePlaceholder: undefined,
+	// Default cache bust is false, it will use the cache
+	cacheBust: false
+};
+
+/**
+ * @param {HTMLElement} node - The DOM Node object to render
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}|null|undefined} options - Rendering options
+ **/
+export async function toSvg(node, options) {
+	options = options || {};
+	let implOptions = copyOptions(options);
+	let clone = await cloneNode(node, options.filter, true);
+	clone = await embedFonts(clone);
+	clone = await inlineImages(clone, implOptions);
+	if (options.bgcolor) clone.style.backgroundColor = options.bgcolor;
+	if (options.width) clone.style.width = options.width + 'px';
+	if (options.height) clone.style.height = options.height + 'px';
+	if (options.style)
+	{
+		Object.keys(options.style).forEach(function (property) {
+			clone.style[property] = options.style[property];
+		});
+	}
+	return makeSvgDataUri(clone,
+		options.width || util.width(node),
+		options.height || util.height(node)
+	);
+};
+
+/**
+ * @param {HTMLElement} node - The DOM Node object to render
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}|null|undefined} options - Rendering options, @see {@link toSvg}
+ * */
+export function toPixelData(node, options) {
+	return draw(node, options || {})
+		.then(function (canvas) {
+			let ctx = canvas.getContext('2d');
+			if (ctx)
+			{
+				return ctx.getImageData(
+						0,
+						0,
+						util.width(node),
+						util.height(node)
+					).data;
+			}
+			else
+			{
+				return null;
+			}
+		});
+}
+
+/**
+ * @param {HTMLElement} node - The DOM Node object to render
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}|null|undefined} options - Rendering options, @see {@link toSvg}
+ * */
+export async function toPng(node, options) {
+	let canvas = await draw(node, options || {});
+	return canvas.toDataURL();
+}
+
+/**
+ * @param {HTMLElement} node - The DOM Node object to render
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}|null|undefined} options - Rendering options, @see {@link toSvg}
+ * */
+export async function toJpeg(node, options) {
+	options = options || {};
+	let canvas = await draw(node, options);
+	return canvas.toDataURL('image/jpeg', options.quality || 1.0);
+}
+
+/**
+ * @param {HTMLElement} node - The DOM Node object to render
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}|null|undefined} options - Rendering options, @see {@link toSvg}
+ * */
+export async function toBlob(node, options) {
+	let canvas = await draw(node, options || {});
+	return await util.canvasToBlob(canvas);
+}
+
+/**
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}} options
+ */
+function copyOptions(options) {
+	let implOptions = {};
+	// Copy options to impl options for use in impl
+	if(typeof(options.imagePlaceholder) === 'undefined') {
+		implOptions.imagePlaceholder = defaultOptions.imagePlaceholder;
+	} else {
+		implOptions.imagePlaceholder = options.imagePlaceholder;
+	}
+
+	if(typeof(options.cacheBust) === 'undefined') {
+		implOptions.cacheBust = defaultOptions.cacheBust;
+	} else {
+		implOptions.cacheBust = options.cacheBust;
+	}
+	return implOptions;
+}
+
+/**
+ * @param {HTMLElement} domNode
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}|null|undefined} options
+ */
+async function draw(domNode, options) {
+	let svgUrl = await toSvg(domNode, options);
+	let image = await util.makeImage(svgUrl);
+	await util.delay(100)();
+	let canvas = newCanvas(domNode, options);
+	let ctx = canvas.getContext('2d');
+	if (ctx) ctx.drawImage(image, 0, 0);
+	return canvas;
+}
+
+/**
+ * @param {HTMLElement} domNode
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}|null|undefined} options
+ */
+function newCanvas(domNode, options) {
+	let canvas = document.createElement('canvas');
+	canvas.width = options.width || domNode.offsetWidth;
+	canvas.height = options.height || domNode.offsetHeight;
+
+	if (options.bgcolor) {
+		var ctx = canvas.getContext('2d');
+		if (ctx != null)
+		{
+			ctx.fillStyle = options.bgcolor;
+			ctx.fillRect(0, 0, canvas.width, canvas.height);
+		}
+	}
+
+	return canvas;
+}
+
+
+/**
+ * @param {HTMLElement} node
+ * @param {(node:Node)=>boolean|undefined} filter
+ * @param {boolean | undefined} [root]
+ */
+async function cloneNode(node, filter, root) {
+	if (!root && filter && !filter(node)) return node;
+	if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());
+	let clone = node.cloneNode(false);
+	clone = await cloneChildren(node, clone, filter);
+	// @ts-ignore
+	return await processClone(node, clone);
+}
+
+/**
+ * @param {Node} original
+ * @param {Node} clone
+ * @param {(node: Node) => boolean | undefined} filter
+ */
+async function cloneChildren(original, clone, filter) {
+	var children = original.childNodes;
+	if (children.length === 0) return clone;
+	for (let i = 0; i < children.length; i++)
+	{
+		let child = children[i];
+		// @ts-ignore
+		let childClone = await cloneNode(child, filter);
+		if (childClone) clone.appendChild(childClone);
+	}
+	return clone;
+}
+
+/**
+ * @param {HTMLElement} original
+ * @param {HTMLElement} clone
+ */
+function processClone(original, clone) {
+	if (!(clone instanceof Element)) return clone;
+
+	return Promise.resolve()
+		.then(cloneStyle)
+		.then(clonePseudoElements)
+		.then(copyUserInput)
+		.then(fixSvg)
+		.then(function () {
+			return clone;
+		});
+
+	function cloneStyle() {
+		copyStyle(window.getComputedStyle(original), clone.style);
+
+		/**
+		 * @param {CSSStyleDeclaration} source
+		 * @param {CSSStyleDeclaration} target
+		 */
+		function copyStyle(source, target) {
+			if (source.cssText) target.cssText = source.cssText;
+			else copyProperties(source, target);
+
+			/**
+			 * @param {CSSStyleDeclaration} source
+			 * @param {{ setProperty: (arg0: any, arg1: any, arg2: any) => void; }} target
+			 */
+			function copyProperties(source, target) {
+				for (let i = 0; i < source.length; i++)
+				{
+					let name = source[i];
+					target.setProperty(
+						name,
+						source.getPropertyValue(name),
+						source.getPropertyPriority(name)
+					);
+				}
+			}
+		}
+	}
+
+	function clonePseudoElements() {
+		[':before', ':after'].forEach(function (element) {
+			clonePseudoElement(element);
+		});
+
+		/**
+		 * @param {string} element
+		 */
+		function clonePseudoElement(element) {
+			var style = window.getComputedStyle(original, element);
+			var content = style.getPropertyValue('content');
+
+			if (content === '' || content === 'none') return;
+
+			var className = util.uid();
+			clone.className = clone.className + ' ' + className;
+			var styleElement = document.createElement('style');
+			styleElement.appendChild(formatPseudoElementStyle(className, element, style));
+			clone.appendChild(styleElement);
+
+			/**
+			 * @param {string} className
+			 * @param {string} element
+			 * @param {CSSStyleDeclaration} style
+			 */
+			function formatPseudoElementStyle(className, element, style) {
+				let selector = '.' + className + ':' + element;
+				let cssText = style.cssText ? formatCssText(style) : formatCssProperties(style);
+				return document.createTextNode(selector + '{' + cssText + '}');
+
+				/**
+				 * @param {CSSStyleDeclaration} style
+				 */
+				function formatCssText(style) {
+					let content = style.getPropertyValue('content');
+					return style.cssText + ' content: ' + content + ';';
+				}
+
+				/**
+				 * @param {CSSStyleDeclaration} style
+				 */
+				function formatCssProperties(style) {
+					let css = [];
+					for (let i = 0; i < style.length; i++)
+					{
+						let name = style[i];
+						css.push(name + ': ' +
+							style.getPropertyValue(name) +
+							(style.getPropertyPriority(name) ? ' !important' : ''));
+					}
+					return css.join('; ') + ';';
+				}
+			}
+		}
+	}
+
+	function copyUserInput() {
+		if (original instanceof HTMLTextAreaElement) clone.innerHTML = original.value;
+		if (original instanceof HTMLInputElement) clone.setAttribute("value", original.value);
+	}
+
+	function fixSvg() {
+		if (!(clone instanceof SVGElement)) return;
+		clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+
+		if (!(clone instanceof SVGRectElement)) return;
+		['width', 'height'].forEach(function (attribute) {
+			var value = clone.getAttribute(attribute);
+			if (!value) return;
+
+			clone.style.setProperty(attribute, value);
+		});
+	}
+}
+
+/**
+ * @param {HTMLElement} node
+ */
+async function embedFonts(node) {
+	let cssText = await fontFaces.resolveAll();
+	let styleNode = document.createElement('style');
+	node.appendChild(styleNode);
+	styleNode.appendChild(document.createTextNode(cssText));
+	return node;
+}
+
+/**
+ * @param {HTMLElement} node
+ * @param {{ cacheBust: boolean; imagePlaceholder?: string; } | undefined} implOptions
+ */
+async function inlineImages(node, implOptions) {
+	return await images.inlineAll(node, implOptions);
+}
+
+/**
+ * @param {Element} node
+ * @param {string | number} width
+ * @param {string | number} height
+ */
+function makeSvgDataUri(node, width, height) {
+	node.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+	let xhtml = util.escapeXhtml(new XMLSerializer().serializeToString(node));
+	let foreignObject = '<foreignObject x="0" y="0" width="100%" height="100%">' + xhtml + '</foreignObject>';
+	let svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' + foreignObject + '</svg>';
+	return 'data:image/svg+xml;charset=utf-8,' + svg;
+}

package/domtoimage/inliner.js

@@ -0,0 +1,65 @@
+import * as util from "./util.js";
+
+let URL_REGEX = /url\(['"]?([^'"]+?)['"]?\)/g;
+
+/**
+ * @param {string} string
+ */
+export function shouldProcess(string) {
+	return string.search(URL_REGEX) !== -1;
+}
+
+/**
+ * @param {string} string
+ */
+function readUrls(string) {
+	var result = [];
+	var match;
+	while ((match = URL_REGEX.exec(string)) !== null) {
+		result.push(match[1]);
+	}
+	return result.filter(function (url) {
+		return !util.isDataUrl(url);
+	});
+}
+
+/**
+ * @param {string} url
+ */
+function urlAsRegex(url) {
+	return new RegExp('(url\\([\'"]?)(' + util.escape(url) + ')([\'"]?\\))', 'g');
+}
+
+/**
+ * @param {string} string
+ * @param {string} url
+ * @param {string | null | undefined} baseUrl
+ * @param {((url: string)=>string)|undefined} get
+ * @param {{ cacheBust: boolean; imagePlaceholder?: string; } | undefined} options
+ */
+async function inline(string, url, baseUrl, get, options) {
+	url = baseUrl ? util.resolveUrl(url, baseUrl) : url;
+	let data;
+	if (get)
+		data = get(url);
+	else
+		data = await util.getAndEncode(url, options);
+	let dataUrl = util.dataAsUrl(data, util.mimeType(url));
+	return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
+}
+
+/**
+ * @param {string} string
+ * @param {string | null | undefined} baseUrl
+ * @param {((url: string)=>string)|undefined} get
+ * @param {{ cacheBust: boolean; imagePlaceholder?: string; } | undefined} options
+ */
+export async function inlineAll(string, baseUrl, get, options) {
+	if (!shouldProcess(string)) return string;
+	let urls = readUrls(string);
+	let done = string;
+	urls.forEach(async function (url) {
+		done = await inline(done, url, baseUrl, get, options);
+	});
+	return done;
+}