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"]
相关推荐
YGY Webgis糕手之路3 分钟前
OpenLayers 综合案例-底图换肤(变色)
前端·经验分享·笔记·vue·web
milanleon6 分钟前
前端路由
前端
别惊醒渔人8 分钟前
前端优化之虚拟列表实现指南:从库集成到手动开发
前端·javascript·vue.js·笔记
沫小北22 分钟前
HarmonyOS ArkTS 状态管理详解
前端
Onion_L37 分钟前
Rust CLI 发布 NPM 的开发记录🫕
前端·rust·npm
右子37 分钟前
Claude Code:介绍与使用教程
前端·人工智能·后端
bigyoung38 分钟前
如何使用 `react-i18next` 来国际化一段包含 React 组件的文本
前端·javascript
沐土Arvin41 分钟前
前端代码格式化工具HTML离线版
前端
舟舟好梦43 分钟前
SZU大学物理实验报告|光敏电阻
前端
林太白1 小时前
NestJS-角色模块
前端·javascript·nestjs