大家好,我是Daniel。我正在寻找有时间和动力来维护这个仓库的人。我本想重新投入,但今年可能抽不出时间。最理想的当然是有人能把它作为工作的一部分来维护。你可以通过电子邮件联系我。地址在这里:https://people.epfl.ch/daniel.probst/?lang=en

SmilesDrawer 2.0

无需服务器,无需图片,无需模板,只需一个SMILES 😊

当前版本:2.1.5

<表格内容略>

在特定框架中的示例

<详细信息略>

请引用

如果您使用此代码或应用程序,请引用《化学信息与建模杂志》发表的原始论文:10.1021/acs.jcim.7b00425

旧版文档

目前完全向后兼容。

示例

使用浅色主题的示例可以在这里找到,使用深色主题的示例可以在这里找到。SmilesDrawer的颜色是完全可配置的。

显示不同数据库分子的示例:

一个非常简单的JSFiddle示例可以在这里找到。这个示例展示了SmilesDrawer.apply()功能,它为每个带有data-smiles属性的canvas元素绘制结构。例如<canvas data-smiles="C1CCCCC1"></canvas>

实验性功能

如果在绘制复杂环系(包括很长的键)时遇到问题,请启用实验性功能(参见选项)。

"安装"

SmilesDrawer可从unpkg内容分发网络获得:

https://unpkg.com/smiles-drawer@1.2.0/dist/smiles-drawer.min.js

你可以使用yarn轻松获取smiles-drawer:

yarn add smiles-drawer

或者你可以直接从这里下载文件。

构建Smiles Drawer

如果你决定不使用dist中现成的脚本,你可以(编辑和)通过运行以下命令来构建项目:

npm install
gulp

入门

要获得一个简单的输入框,让用户输入SMILES并在画布中显示,以下最小示例就足够了。为了获得漂亮一致的字体渲染,你必须从谷歌字体包含droid sans字体。

<HTML代码略>

请参阅示例文件夹以获取更完整的示例。

选项

选项在构造函数中提供,如上面的示例所示。

let options = { ... };
let smilesDrawer = new SmilesDrawer(options);

以下选项可用:

选项	标识符	数据类型	默认值
绘图宽度	width	数字	500
绘图高度	height	数字	500
键线粗细	bondThickness	数字	0.6
键长	bondLength	数字	15
短键长度（如双键）占键长的百分比	shortBondLength	数字	0.85
键间距（如双键之间的间距）	bondSpacing	数字	0.18 * 15
原子可视化	atomVisualization	字符串 ['default', 'balls', 'none']	'default'
大字体大小（元素符号用，单位pt）	fontSizeLarge	数字	6
小字体大小（数字用，单位pt）	fontSizeSmall	数字	4
内边距	padding	数字	20.0
使用实验性功能	experimental	布尔值	false
显示端基碳（CH3）	terminalCarbons	布尔值	false
显示显式氢	explicitHydrogens	布尔值	false
重叠敏感度	overlapSensitivity	数字	0.42
重叠解析迭代次数	overlapResolutionIterations	数字	1
绘制连接的端基和伪元素	compactDrawing	布尔值	true
如果可用，绘制等距SMILES	isometric	布尔值	true
调试（在画布上绘制调试信息）	debug	布尔值	false
颜色主题	themes	对象	见下文

默认选项定义如下：

{
    width: 500,
    height: 500,
    bondThickness: 0.6,
    bondLength: 15,
    shortBondLength: 0.85,
    bondSpacing: 0.18 * 15,
    atomVisualization: 'default',
    isomeric: true,
    debug: false,
    terminalCarbons: false,
    explicitHydrogens: false,
    overlapSensitivity: 0.42,
    overlapResolutionIterations: 1,
    compactDrawing: true,
    fontSizeLarge: 5,
    fontSizeSmall: 3,
    padding: 20.0,
    experimental: false,
    themes: {
        dark: {
            C: '#fff',
            O: '#e74c3c',
            N: '#3498db',
            F: '#27ae60',
            CL: '#16a085',
            BR: '#d35400',
            I: '#8e44ad',
            P: '#d35400',
            S: '#f1c40f',
            B: '#e67e22',
            SI: '#e67e22',
            H: '#fff',
            BACKGROUND: '#141414'
        },
        light: {
            C: '#222',
            O: '#e74c3c',
            N: '#3498db',
            F: '#27ae60',
            CL: '#16a085',
            BR: '#d35400',
            I: '#8e44ad',
            P: '#d35400',
            S: '#f1c40f',
            B: '#e67e22',
            SI: '#e67e22',
            H: '#222',
            BACKGROUND: '#fff'
        }
    }
};

使用方法

SmilesDrawer的实例可以绘制到多个目标。对每组选项初始化一次SmilesDrawer（如果要以两种不同的尺寸绘图，你需要初始化两个不同的对象）。

let smilesDrawer = new SmilesDrawer.Drawer({ width: 250, height: 250 });

为了描绘SMILES字符串，需要使用SmilesDrawer的SMILES解析器进行解析，该解析器封装在静态函数SmilesDrawer.parse()中，其中第一个参数是SMILES字符串，第二个参数是解析成功的回调函数。第三个参数提供了一种使用回调处理错误的方法。

SmilesDrawer.parse('C1CCCCC1', function (tree) {
    smilesDrawer.draw(tree, 'output-canvas', 'light', false);
}, function (err) {
    console.log(err);
}

smilesDrawer.draw()函数需要两个参数，最多可接受四个参数。第一个参数是解析函数返回的解析树（通过回调），第二个是HTML画布元素的id，结构将在其上绘制。两个可选参数分别是是否使用浅色或深色主题（默认为'light'）以及是否仅计算环数、hac等属性而不描绘结构（默认为false）。