Current Dev State

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

@@ -0,0 +1,129 @@
+/****************************************************************************
+ * 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 { updateFormState, setDefaultSettings } from '../state/form';
+import { saveSettings } from '../state/options';
+
+import settingsSchema from '../data/options-schema';
+import { Form, Field } from '../component/form';
+import { storage } from '../utils';
+
+import Dialog from '../component/dialog';
+import Accordion from '../component/accordion';
+import SystemFonts from '../component/systemfonts';
+import SaveButton from '../component/savebutton';
+import OpenButton from '../component/openbutton';
+import MeasureInput from '../component/measure-input';
+
+function Settings(props) {
+	const { initState, formState, server, onOpenFile, onReset, appOpts, ...prop } = props;
+	const tabs = ['Rendering customization options', 'Atoms', 'Bonds', 'Server', '3D Viewer', 'Options for debugging'];
+	const activeTabs = { 0: true, 1: false, 2: false, 3: false, 4: false, 5: false };
+
+	return (
+		<Dialog title="Settings" className="settings"
+				result={() => formState.result} valid={() => formState.valid} params={prop}
+				buttons={[
+					<OpenButton className="open" server={ server } onLoad={ onOpenFile }>
+						Open From File…
+					</OpenButton>,
+					<SaveButton className="save" data={JSON.stringify(formState.result)} filename={'ketcher-settings'}>
+						Save To File…
+					</SaveButton>,
+					<button onClick={ onReset }>Reset</button>,
+					"OK", "Cancel"]} >
+			<Form schema={settingsSchema} init={initState} {...formState}>
+				<Accordion className="accordion" captions={tabs} active={activeTabs}>
+					<fieldset className="render">
+						<Field name="resetToSelect"/>
+						<Field name="rotationStep"/>
+						<SelectCheckbox name="showValenceWarnings"/>
+						<SelectCheckbox name="atomColoring"/>
+						<SelectCheckbox name="hideChiralFlag"/>
+						<Field name="font" component={SystemFonts}/>
+						<FieldMeasure name="fontsz"/>
+						<FieldMeasure name="fontszsub"/>
+					</fieldset>
+					<fieldset className="atoms">
+						<SelectCheckbox name="carbonExplicitly"/>
+						<SelectCheckbox name="showCharge"/>
+						<SelectCheckbox name="showValence"/>
+						<Field name="showHydrogenLabels"/>
+					</fieldset>
+					<fieldset className="bonds">
+						<SelectCheckbox name="aromaticCircle"/>
+						<FieldMeasure name="doubleBondWidth"/>
+						<FieldMeasure name="bondThickness"/>
+						<FieldMeasure name="stereoBondWidth"/>
+					</fieldset>
+					<fieldset className="server" disabled={!appOpts.server}>
+						<SelectCheckbox name="smart-layout"/>
+						<SelectCheckbox name="ignore-stereochemistry-errors"/>
+						<SelectCheckbox name="mass-skip-error-on-pseudoatoms"/>
+						<SelectCheckbox name="gross-formula-add-rsites"/>
+					</fieldset>
+					<fieldset className="3dView" disabled={!appOpts.miewPath}>
+						<Field name="miewMode"/>
+						<Field name="miewTheme"/>
+						<Field name="miewAtomLabel"/>
+					</fieldset>
+					<fieldset className="debug">
+						<SelectCheckbox name="showAtomIds"/>
+						<SelectCheckbox name="showBondIds"/>
+						<SelectCheckbox name="showHalfBondIds"/>
+						<SelectCheckbox name="showLoopIds"/>
+					</fieldset>
+				</Accordion>
+				{ !storage.isAvailable() ? <div className="warning">{storage.warningMessage}</div> : null }
+			</Form>
+		</Dialog>
+	);
+}
+
+function SelectCheckbox(props, {schema}) {
+	const desc = {
+		title: schema.properties[props.name].title,
+		enum: [true, false],
+		enumNames: ['on', 'off'],
+	};
+	return <Field schema={desc} {...props}/>;
+}
+
+function FieldMeasure(props, {schema}) {
+	return <Field schema={schema.properties[props.name]} component={MeasureInput} {...props}/>
+}
+
+export default connect(store => ({
+	appOpts: store.options.app,
+	initState: store.options.settings,
+	formState: store.modal.form
+}), (dispatch, props) => ({
+	onOpenFile: newOpts => {
+		try {
+			dispatch(updateFormState({ result: JSON.parse(newOpts) }));
+		} catch (ex) {
+			console.info('Bad file');
+		}
+	},
+	onReset: () => dispatch(setDefaultSettings()),
+	onOk: (res) => {
+		dispatch(saveSettings(res));
+		props.onOk(res);
+	}
+}))(Settings);