aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/controls/chemstruc/graph.tsx

@@ -1,185 +1,185 @@
-import React from "react";
-import { Button, Col, Modal, Popconfirm, Row } from "antd";
-import { RemoteStructServiceProvider } from "ketcher-core";
-import { Editor } from "ketcher-react";
-import "miew/dist/Miew.min.css";
-import "ketcher-react/dist/index.css";
-import "./index.css";
-import HcserviceV3 from "../../tmpl/hcservice-v3";
-import { VEControlProps } from "../../tmpl/interface";
-import { DeploymentUnitOutlined } from "@ant-design/icons";
-import { LocaleContext } from "../../locale/LocaleProvider";
-import DraggableModal from "../../module/draggable-modal";
-
-interface ChemStrucProps extends VEControlProps { }
-
-interface ChemStrucState {
-  modalOpen?: boolean;
-  molFileLoaded?: boolean;
-}
-
-export default class ChemStruc extends React.PureComponent<
-  ChemStrucProps,
-  ChemStrucState
-> {
-  static defaultProps = {
-    viewOrEdit: "view",
-  };
-
-  state = {
-    modalOpen: false,
-    molFileLoaded: false,
-  };
-  static contextType = LocaleContext;
-  context: React.ContextType<typeof LocaleContext>;
-
-  componentDidMount() { }
-
-  //
-  // async componentDidUpdate(prevProps, prevState, snapshot) {
-  //     const {value} = this.props
-  //     const {value:preValue} = prevProps;
-  //
-  //     if(Object.entries(value).toString() != Object.entries(preValue).toString()){
-  //         await this.loadData();
-  //     }
-  // }
-
-  loadData = async () => {
-    const { value, serverKey } = this.props;
-    if (value) {
-      let val = JSON.parse(value);
-      let molFile;
-      if (val.valid == true) {
-        //此处要优化
-        molFile = await HcserviceV3.loadFileTxt(serverKey, val.base.path);
-      } else if (val.valid == "new") {
-        molFile = val.body;
-      } else {
-        molFile = undefined;
-      }
-      //console.log('molFile:', molFile);
-
-      //因一有别名就报错,不能显示
-      //去掉别名
-      let reg1 = /"alias":\s*\S*,/g;
-      // let reg1 = new RegExp('/a/',"g"); // 加'g'，删除字符串里所有的"a"
-      let molFile1 = molFile.replace(reg1, "");
-      // console.log('molFile1:', molFile1);
-      global.ketcher.setMolecule(molFile1);
-    }
-  };
-
-  saveMolfile = async () => {
-    let value = await global.ketcher.getKet();
-    //let value = await global.ketcher.getGraphAsync();
-    //console.log('ket value:', value);
-    this.triggerChange(value);
-    this.setState({
-      modalOpen: false,
-    });
-  };
-
-  triggerChange = (changedValue) => {
-    const { onChange } = this.props;
-    if (onChange) {
-      onChange(JSON.stringify({ valid: "new", body: changedValue }));
-    }
-  };
-
-  showView = async () => {
-    await this.loadData();
-    this.setState({
-      modalOpen: true,
-    });
-  };
-  onCancel = () => {
-    this.setState({
-      modalOpen: false,
-    });
-  };
-
-  render() {
-    const { disabled, viewOrEdit } = this.props;
-    const { translate } = this.context;
-
-    const structServiceProvider = new RemoteStructServiceProvider("");
-    return (
-      <>
-        <Button onClick={this.showView}>
-          <DeploymentUnitOutlined />{" "}
-          {viewOrEdit == "view" ? translate("${查看}") : translate("${编辑}")}
-        </Button>
-        <DraggableModal
-          closable={false}
-          open={this.state.modalOpen}
-          forceRender={true}
-          centered
-          style={{
-            maxWidth: "calc(100vw - 62px)",
-            maxHeight: "calc(100vw - 50px)",
-          }}
-          width={1200}
-          onCancel={() => {
-            this.onCancel();
-          }}
-          footer={
-            disabled
-              ? [
-                <Button
-                  key={1}
-                  onClick={() => {
-                    this.onCancel();
-                  }}
-                >
-                  {translate("${取消}")}
-                </Button>,
-              ]
-              : [
-                <Popconfirm
-                  key={2}
-                  placement="top"
-                  title={translate("${确定要取消本次编辑的数据吗}?")}
-                  onConfirm={this.onCancel}
-                  okText={translate("${确定}")}
-                  cancelText={translate("${取消}")}
-                >
-                  <Button>取消</Button>
-                </Popconfirm>,
-                <Button
-                  key={3}
-                  onClick={() => {
-                    this.saveMolfile();
-                  }}
-                  type="primary"
-                >
-                  确定
-                </Button>,
-              ]
-          }
-          bodyStyle={{ width: "1200px" }}
-        >
-          <Row
-            style={{
-              height: "430px",
-              border: "1px solid #00f",
-              maxWidth: "calc(100vw - 92px)",
-              maxHeight: "calc(100vw - 80px)",
-            }}
-          >
-            <Col key={1} span={24} style={{ height: "430px" }}>
-              <Editor
-                onInit={async (ketcher) => {
-                  global.ketcher = ketcher;
-                }}
-                staticResourcesUrl={"ketcher"}
-                structServiceProvider={structServiceProvider as any}
-                errorHandler={undefined}
-              />
-            </Col>
-          </Row>
-        </DraggableModal>
-      </>
-    );
-  }
-}
+import React from "react";
+import { Button, Col, Modal, Popconfirm, Row } from "antd";
+import { RemoteStructServiceProvider } from "ketcher-core";
+import { Editor } from "ketcher-react";
+import "miew/dist/Miew.min.css";
+import "ketcher-react/dist/index.css";
+import "./index.css";
+import HcserviceV3 from "../../tmpl/hcservice-v3";
+import { VEControlProps } from "../../tmpl/interface";
+import { DeploymentUnitOutlined } from "@ant-design/icons";
+import { LocaleContext } from "../../locale/LocaleProvider";
+import DraggableModal from "../../module/draggable-modal";
+
+interface ChemStrucProps extends VEControlProps { }
+
+interface ChemStrucState {
+  modalOpen?: boolean;
+  molFileLoaded?: boolean;
+}
+
+export default class ChemStruc extends React.PureComponent<
+  ChemStrucProps,
+  ChemStrucState
+> {
+  static defaultProps = {
+    viewOrEdit: "view",
+  };
+
+  state = {
+    modalOpen: false,
+    molFileLoaded: false,
+  };
+  static contextType = LocaleContext;
+  context: React.ContextType<typeof LocaleContext>;
+
+  componentDidMount() { }
+
+  //
+  // async componentDidUpdate(prevProps, prevState, snapshot) {
+  //     const {value} = this.props
+  //     const {value:preValue} = prevProps;
+  //
+  //     if(Object.entries(value).toString() != Object.entries(preValue).toString()){
+  //         await this.loadData();
+  //     }
+  // }
+
+  loadData = async () => {
+    const { value, serverKey } = this.props;
+    if (value) {
+      let val = JSON.parse(value);
+      let molFile;
+      if (val.valid == true) {
+        //此处要优化
+        molFile = await HcserviceV3.loadFileTxt(serverKey, val.base.path);
+      } else if (val.valid == "new") {
+        molFile = val.body;
+      } else {
+        molFile = undefined;
+      }
+      //console.log('molFile:', molFile);
+
+      //因一有别名就报错,不能显示
+      //去掉别名
+      let reg1 = /"alias":\s*\S*,/g;
+      // let reg1 = new RegExp('/a/',"g"); // 加'g'，删除字符串里所有的"a"
+      let molFile1 = molFile.replace(reg1, "");
+      // console.log('molFile1:', molFile1);
+      global.ketcher.setMolecule(molFile1);
+    }
+  };
+
+  saveMolfile = async () => {
+    let value = await global.ketcher.getKet();
+    //let value = await global.ketcher.getGraphAsync();
+    //console.log('ket value:', value);
+    this.triggerChange(value);
+    this.setState({
+      modalOpen: false,
+    });
+  };
+
+  triggerChange = (changedValue) => {
+    const { onChange } = this.props;
+    if (onChange) {
+      onChange(JSON.stringify({ valid: "new", body: changedValue }));
+    }
+  };
+
+  showView = async () => {
+    await this.loadData();
+    this.setState({
+      modalOpen: true,
+    });
+  };
+  onCancel = () => {
+    this.setState({
+      modalOpen: false,
+    });
+  };
+
+  render() {
+    const { disabled, viewOrEdit } = this.props;
+    const { translate } = this.context;
+
+    const structServiceProvider = new RemoteStructServiceProvider("");
+    return (
+      <>
+        <Button onClick={this.showView}>
+          <DeploymentUnitOutlined />{" "}
+          {viewOrEdit == "view" ? translate("${查看}") : translate("${编辑}")}
+        </Button>
+        <DraggableModal
+          closable={false}
+          open={this.state.modalOpen}
+          forceRender={true}
+          centered
+          style={{
+            maxWidth: "calc(100vw - 62px)",
+            maxHeight: "calc(100vw - 50px)",
+          }}
+          width={1200}
+          onCancel={() => {
+            this.onCancel();
+          }}
+          footer={
+            disabled
+              ? [
+                <Button
+                  key={1}
+                  onClick={() => {
+                    this.onCancel();
+                  }}
+                >
+                  {translate("${取消}")}
+                </Button>,
+              ]
+              : [
+                <Popconfirm
+                  key={2}
+                  placement="top"
+                  title={translate("${确定要取消本次编辑的数据吗}?")}
+                  onConfirm={this.onCancel}
+                  okText={translate("${确定}")}
+                  cancelText={translate("${取消}")}
+                >
+                  <Button>取消</Button>
+                </Popconfirm>,
+                <Button
+                  key={3}
+                  onClick={() => {
+                    this.saveMolfile();
+                  }}
+                  type="primary"
+                >
+                  确定
+                </Button>,
+              ]
+          }
+          bodyStyle={{ width: "1200px" }}
+        >
+          <Row
+            style={{
+              height: "430px",
+              border: "1px solid #00f",
+              maxWidth: "calc(100vw - 92px)",
+              maxHeight: "calc(100vw - 80px)",
+            }}
+          >
+            <Col key={1} span={24} style={{ height: "430px" }}>
+              <Editor
+                onInit={async (ketcher) => {
+                  global.ketcher = ketcher;
+                }}
+                staticResourcesUrl={"ketcher"}
+                structServiceProvider={structServiceProvider as any}
+                errorHandler={undefined}
+              />
+            </Col>
+          </Row>
+        </DraggableModal>
+      </>
+    );
+  }
+}

package/src/aldehyde/controls/chemstruc/index.css

@@ -1,28 +1,28 @@
-body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.chemstruc-edit-upload{
-  width: 230px;
-}
-
-.ant-upload-list-picture-card-container,
-.ant-upload-select-picture-card{
-  width: 66px!important;
-  height:66px!important;
-}
-/*控制ketcher的选择工具栏的显示层级，modal为1000，所以此处为1020*/
-.ToolbarMultiToolItem-module_portal__yDg5_{
-  z-index: 1020!important;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.chemstruc-edit-upload{
+  width: 230px;
+}
+
+.ant-upload-list-picture-card-container,
+.ant-upload-select-picture-card{
+  width: 66px!important;
+  height:66px!important;
+}
+/*控制ketcher的选择工具栏的显示层级，modal为1000，所以此处为1020*/
+.ToolbarMultiToolItem-module_portal__yDg5_{
+  z-index: 1020!important;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

package/src/aldehyde/controls/code-editor/sql-code-editor.tsx

@@ -1,73 +1,73 @@
-import React,{useRef,useEffect} from "react";
-import {Card} from 'antd';
-import {EditorView, basicSetup} from "codemirror"
-import {sql} from "@codemirror/lang-sql"
-import {VEControlProps} from "../../tmpl/interface";
-import {Compartment, EditorState,Text} from "@codemirror/state"
-interface SqlCodeEditorProps  extends VEControlProps{
-}
-
-interface SqlCodeEditorState {
-
-}
-
-const Editor = (props) => {
-    const editorRef = useRef(null);
-    let readOnly = new Compartment;
-    useEffect(() => {
-        const state = EditorState.create({
-            doc: props.value,
-            extensions: [
-                basicSetup,
-                EditorView.updateListener.of((v) => {
-                    if (v.docChanged) {
-                        props.handleChange(view.state.doc); // custom function that will be triggered on every editor change.
-                    }
-                }),
-                sql(), // or any other language you want to support
-                readOnly.of(EditorState.readOnly.of(props.readOnly ? props.readOnly : false)),
-            ],
-        });
-
-        const view = new EditorView({
-            state,
-            parent: editorRef.current,
-        });
-
-        return () => {
-            view.destroy();
-        };
-    }, []);
-
-    return (
-        <div id="CMEditor">
-            <div ref={editorRef} />
-        </div>
-    );
-};
-
-export default class SqlCodeEditor extends React.PureComponent<SqlCodeEditorProps, SqlCodeEditorState> {
-
-    static defaultProps = {
-    }
-
-    state = {
-
-    }
-
-    handleChange=(value)=>{
-        console.log(value);
-        this.props.onChange(value);
-    }
-
-    componentDidMount() {
-
-    }
-
-    render() {
-        const { value,viewOrEdit } = this.props;
-        return <Card size={'small'} bodyStyle={{'padding': '2px'}}>
-            <Editor handleChange={this.handleChange} readOnly={viewOrEdit=='view'?true:false}  value={value} ></Editor>
-        </Card>;
-    }
-}
+import React,{useRef,useEffect} from "react";
+import {Card} from 'antd';
+import {EditorView, basicSetup} from "codemirror"
+import {sql} from "@codemirror/lang-sql"
+import {VEControlProps} from "../../tmpl/interface";
+import {Compartment, EditorState,Text} from "@codemirror/state"
+interface SqlCodeEditorProps  extends VEControlProps{
+}
+
+interface SqlCodeEditorState {
+
+}
+
+const Editor = (props) => {
+    const editorRef = useRef(null);
+    let readOnly = new Compartment;
+    useEffect(() => {
+        const state = EditorState.create({
+            doc: props.value,
+            extensions: [
+                basicSetup,
+                EditorView.updateListener.of((v) => {
+                    if (v.docChanged) {
+                        props.handleChange(view.state.doc); // custom function that will be triggered on every editor change.
+                    }
+                }),
+                sql(), // or any other language you want to support
+                readOnly.of(EditorState.readOnly.of(props.readOnly ? props.readOnly : false)),
+            ],
+        });
+
+        const view = new EditorView({
+            state,
+            parent: editorRef.current,
+        });
+
+        return () => {
+            view.destroy();
+        };
+    }, []);
+
+    return (
+        <div id="CMEditor">
+            <div ref={editorRef} />
+        </div>
+    );
+};
+
+export default class SqlCodeEditor extends React.PureComponent<SqlCodeEditorProps, SqlCodeEditorState> {
+
+    static defaultProps = {
+    }
+
+    state = {
+
+    }
+
+    handleChange=(value)=>{
+        console.log(value);
+        this.props.onChange(value);
+    }
+
+    componentDidMount() {
+
+    }
+
+    render() {
+        const { value,viewOrEdit } = this.props;
+        return <Card size={'small'} bodyStyle={{'padding': '2px'}}>
+            <Editor handleChange={this.handleChange} readOnly={viewOrEdit=='view'?true:false}  value={value} ></Editor>
+        </Card>;
+    }
+}

package/src/aldehyde/controls/collapse-card/index.css

@@ -1,9 +1,9 @@
-
-.collapse .ant-card-body {
-    padding:0px
-}
-
-.ant-card-head-title button{
-    font-size: 16px;
-    padding:0px;
+
+.collapse .ant-card-body {
+    padding:0px
+}
+
+.ant-card-head-title button{
+    font-size: 16px;
+    padding:0px;
 }