Current Dev State

static/js/ketcher2/test/render/index.js

@@ -0,0 +1,70 @@
+/****************************************************************************
+ * Copyright 2017 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+/* eslint-env node */
+var ora = require('ora');
+var tap = require('tap');
+var istanbul = require('istanbul');
+
+var libSymbol = require('../utils/library');
+var cols = require('../utils/collections')();
+var browserSession = require('../utils/browser-session');
+
+browserSession((browser, testDir) => {
+	browser = browser.url(`${testDir}/render/render-test.html`);
+
+	for (let colname of cols.names()) {
+		tap.test(colname, t => {
+			for (let name of cols(colname).names()) {
+				let sampleName = `${colname}/${name}`;
+
+				let structStr = cols(colname).fixture(name);
+				let symbol = libSymbol(sampleName);  // string Symbol element from `fixtures.svg`
+
+				let opts = {
+					sample: sampleName,
+					width: 600,
+					height: 400
+				};
+
+				let spinner = ora(sampleName);
+				browser.then(() => spinner.start());
+
+				browser = browser
+					.execute(function (structStr, symbol, opts) {
+						window.compareTest(structStr, symbol, opts);
+					}, structStr, symbol, opts)
+					.waitForExist('#cmp')
+					.getHTML('#cmp', false).then(mismatch => {
+						mismatch = mismatch.replace(/Mismatch:\s/, '') - 0;
+						spinner.succeed(`${sampleName} - ${mismatch}`);
+						t.ok(mismatch < 0.5, `${sampleName}`);
+					});
+			}
+			browser.then(() => t.end());
+		});
+	}
+
+	return browser.then(() => {
+		return browser.execute('return window.__coverage__').then(cover => {
+			var reporter = new istanbul.Reporter();
+			var collector = new istanbul.Collector();
+			collector.add(cover.value);
+			reporter.add('html'); // istanbul.Report.getReportList()
+			reporter.write(collector, true, () => null);
+		});
+	});
+});

static/js/ketcher2/test/render/render-diff.js

@@ -0,0 +1,92 @@
+/****************************************************************************
+ * Copyright 2017 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+var resemble = require('resemblejs');
+
+function diff(el1, el2, opts) {
+	console.info("diff", el1, el2);
+	let s = new XMLSerializer();
+	let renderEl = document.body;
+	let can1 = document.createElement('canvas');
+	let can2 = document.createElement('canvas');
+	renderEl.appendChild(can1);
+	renderEl.appendChild(can2);
+
+	let svg1 = el1;
+	setCanvasSizeFromSVG(can1, svg1);
+	let strSvg1 = s.serializeToString(svg1);
+
+	let svg2 = el2;
+	setCanvasSizeFromSVG(can2, svg2);
+	let strSvg2 = s.serializeToString(svg2);
+
+	return Promise.all([
+		drawSVGonCanvas(strSvg1, can1),
+		drawSVGonCanvas(strSvg2, can2)
+	]).then(() => compareCanvas(can1, can2, opts));
+}
+
+function setCanvasSizeFromSVG(canvas, svgEl) {
+	svgEl.removeAttribute('style');
+	canvas.width = svgEl.attributes.width.value;
+	canvas.height = svgEl.attributes.height.value;
+}
+
+function drawSVGonCanvas(strSVG, canvas) {
+	return new Promise((res, rej) => {
+		let img = new Image();
+		img.onload = () => {
+			canvas.getContext('2d').drawImage(img, 0, 0);
+			res();
+		};
+		img.onerror = () => rej();
+		img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(strSVG);
+	});
+}
+
+/** opts: {
+		errorColor: {red: int, green: int, blue: int},
+		errorType: 'flat' || 'movement' || 'flatDifferenceIntensity' || 'movementDifferenceIntensity',
+		transparency: 0<= x <=1,
+		largeImageThreshold: !== undefined,
+		useCrossOrigin: !== undefined
+	}
+ 	opts.methods: [
+ 		'ignoreColors' || 'ignoreNothing' || 'ignoreAntialiasing' || 'scaleToSameSize'
+ 		'scaleToSameSize' || 'useOriginalSize'
+ 	]
+ */
+function compareCanvas(c1, c2, opts) {
+	let cmp = resemble(c1.toDataURL('image/png'))
+	    .compareTo(c2.toDataURL('image/png'));
+
+	resemble.outputSettings(opts || {});
+
+	if (opts.methods)
+		for (let method of opts.methods) cmp = cmp[method]();
+
+	c1.remove(); c2.remove();
+	return Promise.resolve(cmp.onComplete(opts.onComplete));
+}
+
+function changeOutputOpts(opts) {
+	resemble.outputSettings(opts);
+}
+
+module.exports = {
+	diff,
+	changeOutputOpts
+};

static/js/ketcher2/test/render/render-test.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<title>Render Test</title>
+<script src="../../node_modules/raphael/raphael.js"></script>
+<script src="../../node_modules/resemblejs/resemble.js"></script>
+
+<script src="../dist/render-test.js"></script>

static/js/ketcher2/test/render/render-test.js

@@ -0,0 +1,121 @@
+/****************************************************************************
+ * Copyright 2017 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ***************************************************************************/
+
+var renderDiff = require('./render-diff').diff;
+var Render = require('../../script/render');
+
+var ketcher = {
+	molfile: require('../../script/chem/molfile'),
+	render: function render(el, struct, opts) {
+		var render = new Render(el, opts);
+		render.setMolecule(struct);
+		render.update();
+	}
+};
+
+var defaultOpts = {
+	width: 600,
+	height: 400,
+	render: {
+		bondLength: 75,
+		showSelectionRegions: false,
+		showBondIds: false,
+		showHalfBondIds: false,
+		showLoopIds: false,
+		showAtomIds: false,
+		autoScale: true,
+		autoScaleMargin: 4,
+		hideImplicitHydrogen: false,
+		hideChiralFlag: true
+	}
+};
+
+function createStyle(style) {
+	return Object.keys(style).reduce((str, prop) => {
+		var value = style[prop];
+		if (typeof value == 'object')
+			return str;
+		if (typeof value == 'number' || typeof value == 'string')
+			value += 'px';
+		return str += `${prop}: ${value};`;
+	}, '');
+}
+
+function createEl(name, opts, parent) {
+	var [tag, id] = name.split('#');
+	var el = document.createElement(tag || 'div');
+	if (id)
+		el.id = id;
+	el.style = createStyle(opts);
+	(parent || document.body).appendChild(el);
+	return el;
+}
+
+function ketcherRender(structStr, options) {
+	let opts = Object.assign({}, defaultOpts, options);
+	var target = createEl('#canvas-ketcher', opts);
+	var struct = ketcher.molfile.parse(structStr);
+	ketcher.render(target, struct, opts.render);
+	return target.firstElementChild;
+}
+
+function symbolRender(symbolStr) {
+	const symbol = new DOMParser().parseFromString(symbolStr, "application/xml").firstElementChild;
+
+	let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+	for (let attr of symbol.attributes)
+		svg.setAttribute(attr.name, attr.value);
+	svg.innerHTML = symbol.innerHTML;
+
+	return svg;
+}
+
+function renderTest(structStr, opts) {
+	document.body.innerHTML = '';
+	return ketcherRender(structStr, opts);
+}
+
+function compareTest(structStr, symbolStr, opts) {
+	console.info('sample', opts.sample);
+
+	document.body.innerHTML = '';
+
+	var renderOpts = {
+		onComplete: function (diff) {
+			document.body.innerHTML = '';
+			var diffImage = new Image();
+			diffImage.src = diff.getImageDataUrl();
+
+			document.body.appendChild(diffImage);
+			createEl('output#cmp', {
+				color: 'green'
+			}).innerHTML = `Mismatch: ${diff.misMatchPercentage}`;
+		},
+		methods: ['ignoreAntialiasing', 'useOriginalSize']
+	};
+
+	var cmp = renderDiff(
+		ketcherRender(structStr, opts),
+		symbolRender(symbolStr),
+		renderOpts);
+
+	cmp.then(function () {
+		console.info('Cmp complete');
+	});
+}
+
+window.renderTest = renderTest;
+window.compareTest = compareTest;