vue项目引入marvinJS

安装

官方没有提供NPM，只能通过iframe的方式引入，id、style、class根据实际情况自行修改

拷贝官方源文件到public目录

优点：调试方便，无需配置proxy

缺点：多系统版本升级易出错

ini 复制代码

 <iframe
    :id="id"
    src="/mjs/editorws.html"
    :style="getStyle"
    class="iframe-editor"
  ></iframe>

引用远程服务（推荐）

优点：多系统版本升级方便

缺点：无法本地调试

引用远程服务需要配置proxy（涉及到跨域问题）

javascript 复制代码

proxy: {
    // 将 /mjs开头的请求代理到后端
    "/mjs": {
      target: "http://xxx.com", // 后端地址
      changeOrigin: true, // 修改 Origin 头为目标地址（针对跨域）
      rewrite: (path) => path.replace(/^/mjs/, ""), // 路径重写（可选）
    },

    "/rest-v1": {
      target: "http://xxx.com", // 后端地址
      changeOrigin: true, // 修改 Origin 头为目标地址（针对跨域）
    },
  },

使用

修改根目录index.html

引入脚本：

xml 复制代码

<script src="/mjs/gui/lib/promise-1.0.0.min.js"></script>
<script src="/mjs/js/marvinjslauncher.js"></script>

获取编辑器对象

javascript 复制代码

let marvinSketcherInstance；
window.MarvinJSUtil.getEditor(`#${props.id}`).then(
    (sketcherInstance) => {
      marvinSketcherInstance = sketcherInstance;
      //设置编辑器模式
      marvinSketcherInstance.setDisplaySettings({
        carbonLabelVisible: false,
        toolbars: props.toolbars, // standard || search
        implicitHydrogen: "HETERO",
        // 'atomIndicesVisible' : true
      });
    },
    function (error) {
      console.log(error);
    }
  );

获取Structure

javascript 复制代码

const exportStructure = () => {
  marvinSketcherInstance.exportStructure("smiles").then(
    (source) => {
      emits("exportStructure", source);
    },
    ({ message }) => {
      ElMessage.error(t("editor.error.msg"));
    }
  );
};

导入Structure

javascript 复制代码

const importStructure = (structure) => {
  marvinSketcherInstance
    .importStructure("smiles", structure)
    .catch(({ message }) => {
      ElMessage.error(t("editor.error.msg"));
    });
};

导出图片（mrv、mol）

php 复制代码

const getImageByMrv = () => {
  imageSrc.value = marvinSketcherInstance.ImageExporter.mrvToDataUrl(
    mrvFileContent.value,
    "Image/PNG",
    {
      carbonLabelVisible: false,
      atomMapsVisible: true,
      chiralFlagVisible: true,
      valenceErrorVisible: true,
      lonePairsVisible: false,
      implicitHydrogen: "TERMINAL_AND_HETERO",
      displayMode: "WIREFRAME",
      backgroundColor: "#FFF",
      zoomMode: "autoshrink",
      width: 600,
      height: 282,
    }
  );
};

监听change事件

scss 复制代码

marvinSketcherInstance.on("molchange", () => {
    exportStructure();
});

WebServices接口使用

mrv格式转芳香环

rest-v1/util/calculate/molExport

php 复制代码

/**
 * mrv格式转换芳香环
 * @param {*} structure
 * @returns
 */
export const mrvFormatAromatizeService = (structure) => {
  return axios.post(import.meta.env.VITE_MRV_FORMAT_URL, {
    structure,
    parameters: "mrv",
    filterChain: [
      {
        filter: "standardizer",
        parameters: { standardizerDefinition: "aromatize" },
      },
    ],
  });
};

mrv转smiles（格式之间的转换都可以使用）

javascript 复制代码

export const mrvFormatSmartsService = (structure) => {
  return axios.post(import.meta.env.VITE_MRV_FORMAT_URL, {
    structure,
    parameters: "smiles",
    inputFormat: "mrv",
  });
};

export、import支持的格式

exportFormats

css 复制代码

[    "mrv",    "cxon",    "mol",    "rxn",    "rgf",    "rdf",    "smiles",    "cxsmiles",    "smarts",    "cxsmarts",    "inchi",    "inchikey",    "name",    "cml",    "mol:V3",    "rxn:V3",    "rgf:V3",    "sdf",    "sdf:ctab",    "csmol",    "cssdf",    "pdb"]

importFormats

css 复制代码

[    "mrv",    "cxon",    "mol",    "rxn",    "rgf",    "rdf",    "smiles",    "cxsmiles",    "smarts",    "cxsmarts",    "inchi",    "d2s",    "name",    "cml",    "mol:V3",    "rxn:V3",    "rgf:V3",    "sdf",    "csmol",    "cssdf",    "cdxml",    "pdb"]