Current Dev State

static/js/ketcher2/script/ui/dialog/analyse.jsx

@@ -0,0 +1,136 @@
+/****************************************************************************
+ * 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.
+ ***************************************************************************/
+
+import { range } from 'lodash/fp';
+
+import { h, Component } from 'preact';
+import { connect } from 'preact-redux';
+/** @jsx h */
+
+import keyName from 'w3c-keyname';
+import Dialog from '../component/dialog';
+import Input from '../component/input';
+
+import { changeRound } from '../state/options';
+import { analyse } from '../state/server';
+
+function FrozenInput({value}) {
+	return (
+		<input type="text" spellCheck={false} value={value}
+			   onKeyDown={ev => allowMovement(ev)}/>
+	);
+}
+
+const formulaRegexp = /\b([A-Z][a-z]{0,3})(\d*)\s*\b/g;
+const errorRegexp = /error:.*/g;
+
+function formulaInputMarkdown(value) {
+	return (
+		<div className="chem-input" spellCheck={false} contentEditable={true}
+			 onKeyDown={ev => allowMovement(ev)}>{value}</div>
+	);
+}
+
+function FormulaInput({value}) {
+	if (errorRegexp.test(value)) {
+		return formulaInputMarkdown(value);
+	}
+
+	const content = [];
+
+	var cnd;
+	var pos = 0;
+
+	while (cnd = formulaRegexp.exec(value)) {
+		content.push(value.substring(pos, cnd.index) + cnd[1]);
+		if (cnd[2].length > 0) content.push(<sub>{cnd[2]}</sub>);
+		pos = cnd.index + cnd[0].length;
+	}
+
+	if (pos === 0) content.push(value);
+	else content.push(value.substring(pos, value.length));
+
+	return formulaInputMarkdown(content);
+}
+
+class Analyse extends Component {
+	constructor(props) {
+		super(props);
+		props.onAnalyse();
+	}
+
+	render() {
+		const { values, round, onAnalyse, onChangeRound, ...props } = this.props;
+		return (
+			<Dialog title="Calculated Values" className="analyse"
+					buttons={["Close"]} params={props}>
+				<ul>{[
+					{ name: 'Chemical Formula', key: 'gross' },
+					{ name: 'Molecular Weight', key: 'molecular-weight', round: 'roundWeight' },
+					{ name: 'Exact Mass', key: 'monoisotopic-mass', round: 'roundMass' },
+					{ name: 'Elemental Analysis', key: 'mass-composition' }
+				].map(item => (
+					<li>
+						<label>{item.name}:</label>
+						{item.key === 'gross'
+							? <FormulaInput value={values ? values[item.key] : 0}/>
+							: <FrozenInput value={values ? roundOff(values[item.key], round[item.round]) : 0}/>
+						}
+						{item.round
+							? <Input schema={{
+								enum: range(0, 8),
+								enumNames: range(0, 8).map(i => `${i} decimal places`)
+							}} value={round[item.round]} onChange={val => onChangeRound(item.round, val)}/>
+							: null
+						}
+					</li>
+				))
+				}</ul>
+			</Dialog>
+		);
+	}
+}
+
+function allowMovement(event) {
+	const movementKeys = ['Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End'];
+	const key = keyName(event);
+
+	if (movementKeys.indexOf(key) === -1)
+		event.preventDefault();
+}
+
+function roundOff(value, round) {
+	if (typeof value === 'number')
+		return value.toFixed(round);
+
+	return value.replace(/[0-9]*\.[0-9]+/g, (str) => (
+		(+str).toFixed(round)
+	));
+}
+
+export default connect(
+	store => ({
+		values: store.options.analyse.values,
+		round: {
+			roundWeight: store.options.analyse.roundWeight,
+			roundMass: store.options.analyse.roundMass
+		}
+	}),
+	dispatch => ({
+		onAnalyse: () => dispatch(analyse()),
+		onChangeRound: (roundName, val) => dispatch(changeRound(roundName, val))
+	})
+)(Analyse);