Current Dev State

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

@@ -0,0 +1,104 @@
+/****************************************************************************
+ * 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 { h } from 'preact';
+import { connect } from 'preact-redux';
+/** @jsx h */
+
+import { changeImage, shouldFragment } from '../state/options';
+import { load } from '../state';
+import { recognize } from '../state/server';
+import Dialog from '../component/dialog';
+import Input from '../component/input';
+import StructRender from '../component/structrender';
+import OpenButton from '../component/openbutton';
+import Spin from '../component/spin';
+
+function Recognize(prop) {
+	const {file, structStr, fragment, onRecognize, isFragment, onImage, ...props} = prop;
+
+	const result = () =>
+		structStr && !(structStr instanceof Promise) ? {structStr, fragment} : null;
+
+	return (
+		<Dialog title="Import From Image" className="recognize"
+				params={props} result={() => result(structStr, fragment) }
+				buttons={[
+					<OpenButton className="open" onLoad={onImage} type="image/*">
+						Choose file…
+					</OpenButton>,
+					<span className="open-filename">{file ? file.name : null}</span>,
+					file && !structStr ? (
+						<button onClick={() => onRecognize(file) }>Recognize</button>
+					) : null,
+					"Cancel",
+					"OK"
+				]}>
+			<div className="picture">
+				{
+					file ? (
+						<img id="pic" src={url(file) || ""}
+							 onError={() => {
+								 onImage(null);
+								 alert("Error, it isn't a picture");
+							 }}/>
+					) : null
+				}
+			</div>
+			<div className="output">
+				{
+					structStr ? (
+						structStr instanceof Promise || typeof structStr !== 'string' ? // in Edge 38:
+							( <Spin/> ) :											// instanceof Promise always `false`
+							( <StructRender className="struct" struct={structStr}/> )
+					) : null
+				}
+			</div>
+			<label>
+				<Input type="checkbox" value={fragment} onChange={v => isFragment(v)}/>
+				Load as a fragment
+			</label>
+		</Dialog>
+	);
+}
+
+function url(file) {
+	if (!file) return null;
+	const URL = window.URL || window.webkitURL;
+	return URL ? URL.createObjectURL(file) : "No preview";
+}
+
+export default connect(
+	store => ({
+		file: store.options.recognize.file,
+		structStr: store.options.recognize.structStr,
+		fragment: store.options.recognize.fragment
+	}),
+	(dispatch, props) => ({
+		isFragment: (v) => dispatch(shouldFragment(v)),
+		onImage: (file) => dispatch(changeImage(file)),
+		onRecognize: (file) => dispatch(recognize(file)),
+		onOk: (res) => {
+			dispatch(
+				load(res.structStr, {
+					rescale: true,
+					fragment: res.fragment
+				})
+			);
+			props.onOk(res);
+		}
+	})
+)(Recognize);