Current Dev State

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;