@sswroom/sswr 1.6.19 → 1.6.21

package/Changelog

@@ -1,3 +1,23 @@
+1.6.21
+-Added data.dataURI2Blob
+-Added EasyPrint.toSVG
+-Added data.blob2DataURL
+-Added data.fetchAsBlob
+-Added text.isDataURL
+-Added text.escapeXhtml
+-Added text.svgStringToDataURI
+-Added web.canvasToBlob
+-Added web.elementToSVGString
+-Added web.genPrintWindowHTML
+-Added web.printImageData
+-Added cesium.CesiumMap.getViewer
+-parser support PNG without EXIF
+
+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.d.ts

@@ -50,4 +50,5 @@ export class CesiumMap extends map.MapControl
 	layerAddGeometry(geometryLayer: any, geom: any): void;
 	layerRemoveGeometry(geometryLayer: any, geom: any): void;
 	layerClearGeometries(geometryLayer: any): void;
+	getViewer(): Viewer;
 }

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)
 {
@@ -496,4 +497,8 @@ export class CesiumMap extends map.MapControl
 	layerAddGeometry(geometryLayer: any, geom: any): void;
 	layerRemoveGeometry(geometryLayer: any, geom: any): void;
 	layerClearGeometries(geometryLayer: any): void;*/
+	getViewer()
+	{
+		return this.viewer;
+	}
 }

package/data.d.ts

@@ -39,6 +39,9 @@ export function shl32(v: number, n: number): number;
 export function sar32(v: number, n: number): number;
 export function shr32(v: number, n: number): number;
 export function objectParseTS(o: object, items: string[]): void;
+export function dataURI2Blob(dataURI: string): Blob;
+export function blob2DataURL(blob: Blob): Promise<string|null>;
+export function fetchAsBlob(url: string, options?: {cacheBust: boolean; imagePlaceholder?: string}): Promise<Blob|null>;
 
 export class DateValue
 {

package/data.js

@@ -1,3 +1,4 @@
+import * as data from "./data.js";
 import * as text from "./text.js";
 
 export const Weekday = {
@@ -455,6 +456,98 @@ export function objectParseTS(o, items)
 	}
 }
 
+/**
+ * @param {string} dataURI
+ */
+export function dataURI2Blob(dataURI)
+{
+	let i = dataURI.indexOf(",");
+	let dsp = [dataURI.substring(0, i), dataURI.substring(i + 1)];
+	let types = dsp[0].split(':')[1].split(';');
+	let mimeString = types[0];
+	let ab;
+	if (types[1] == "base64")
+	{
+		let byteString = atob(dsp[1]);
+		ab = new ArrayBuffer(byteString.length);
+		let dw = new DataView(ab);
+		for(let i = 0; i < byteString.length; i++) {
+				dw.setUint8(i, byteString.charCodeAt(i));
+		}
+	}
+	else
+	{
+		let enc = new TextEncoder();
+		ab = enc.encode(dsp[1]);
+	}
+	return new Blob([ab], {type: mimeString});
+}
+
+/**
+ * @param {Blob} blob
+ */
+export function blob2DataURL(blob)
+{
+	return new Promise((resolve, reject) => {
+		let encoder = new FileReader();
+		encoder.onloadend = function () {
+			let content = encoder.result;
+			if (typeof content == 'string')
+				resolve(content);
+			else
+			{
+				console.error("Error in converting to dataURL", content);
+				resolve(null);
+			}
+		};
+		encoder.readAsDataURL(blob);
+	});
+}
+
+/**
+ * @param {string} url
+ * @param {{ cacheBust: boolean; imagePlaceholder: string; }} options
+ */
+export async function fetchAsBlob(url, options)
+{
+	let TIMEOUT = 30000;
+	if(options && options.cacheBust) {
+		// Cache bypass so we dont have CORS issues with cached images
+		// Source: https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache
+		url += ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime();
+	}
+	let placeholder;
+	if(options && options.imagePlaceholder) {
+		if (text.isDataURL(options.imagePlaceholder))
+		{
+			placeholder = data.dataURI2Blob(options.imagePlaceholder);
+		}
+	}
+	try
+	{
+		let req = await fetch(url, {signal: AbortSignal.timeout(TIMEOUT)});
+		if (!req.ok)
+		{
+			if(placeholder) {
+				return placeholder;
+			} else {
+				console.error('Cannot fetch resource: ' + url + ', status: ' + req.status);
+				return null;
+			}
+		}
+		return await req.blob();
+	}
+	catch (error)
+	{
+		if(placeholder) {
+			return placeholder;
+		} else {
+			console.error('Timeout of ' + TIMEOUT + 'ms occured while fetching resource: ' + url, error);
+			return null;
+		}
+	}
+}
+
 export class DateValue
 {
 	constructor()

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,49 @@
+import * as data from "../data.js";
+import * as text from "../text.js";
+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 (text.isDataURL(element.src)) return element;
+	let blob = await data.fetchAsBlob(element.src, options);
+	let dataUrl = await data.blob2DataURL(blob);
+	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,333 @@
+import * as text from "../text.js";
+import * as web from "../web.js";
+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 web.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}} options
+ */
+async function draw(domNode, options) {
+	let svgUrl = await toSvg(domNode, options);
+	let image = await util.makeImage(svgUrl);
+	let canvas = newCanvas(domNode, options);
+	let ctx = canvas.getContext('2d');
+	return await new Promise((resolve, reject) => {
+		setTimeout(() => {
+			if (ctx)
+			{
+				ctx.drawImage(image, 0, 0);	
+			}
+			resolve(canvas);
+		}, 1);
+	});
+}
+
+/**
+ * @param {HTMLElement} domNode
+ * @param {{filter?:(node: Node)=>boolean,bgcolor?:string,width?:number,height?:number,style?:{[n:string]:string},quality?:number,imagePlaceholder?:string,cacheBust?:boolean}} 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) {
+		let ctx = canvas.getContext('2d');
+		if (ctx != null)
+		{
+			ctx.globalAlpha = 1;
+			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) {
+	return text.svgStringToDataURI(web.elementToSVGString(node, width, height));
+}

package/domtoimage/inliner.js

@@ -0,0 +1,67 @@
+import * as data from "../data.js";
+import * as text from "../text.js";
+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 !text.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)=>Blob)|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 blob;
+	if (get)
+		blob = get(url);
+	else
+		blob = await data.fetchAsBlob(url, options);
+	let dataUrl = await data.blob2DataURL(blob);
+	return string.replace(urlAsRegex(url), '$1' + dataUrl + '$3');
+}
+
+/**
+ * @param {string} string
+ * @param {string | null | undefined} baseUrl
+ * @param {((url: string)=>Blob)|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;
+}