Code download

JS molecular editor source file download address: Download

Directory structure

After the code is downloaded, extract the JS editor directory structure as follows:

css: The style file used by the JS editor

img: Image file used by the JS editor

lib: The JS file in the js editor

lib\dist: The JS library used by the js editor

An example of an HTML call to the index.html JS editor

Fast integration

1. First make sure the HTML page references the corresponding JS resource:

zrender.js

jquery.js

kd-bridge.js

kd-palette.js

kd-palette-core.js

2. Instantiate the new KD_PALETTE object with a DOM ID as the initialization parameter:

const palette = new KD_PALETTE('container');

3. Register artboard ready and error events:

                            
palette.ready(() => {
...
});
palette.error((e)=>{
...
});                                    
                            
                        

4. Initialize the artboard:

palette.initialization(appId);

Note: The AppId is provided by us, please contact us if you need it

5. Set the artboard size:

After successful initialization, palette.ready will be called back, after which ‘palette.initCanvas(width,height)’ can be used to set the width and height of the palette

6. Display and hide of artboard:

To control the display and hiding of the DOM ID, such as: $('#container').show(), $('#container').hide()

7. Get the chemical structure drawn by the artboard:

The current version of the formula only supports mol format to get, directly call palette.getMol() to get the formula content, if you need more formats, please see: Advanced Usage

Advanced usage

1. Compatibility

Supports IE8+ and all modern browsers

2. Use

2.1 Adding a Container

Add the editor's div container to the page, and add the attributes ' id= 'container' ', ' class='kdjs-cont' ' to the container.

Add Html code

<div id="container" class="kdjs-cont"></div>

Add reference script

<script src="lib/Script/jquery-1.9.1.js"></script>
<script src="lib/Script/zrender.js"></script>
<script src="lib/Script/kd-bridge.js"></script>
<script src="lib/Script/kd-palette.js"></script>
<script src="lib/Script/kd-palette-core.js"></script>

Initialize

Use 'var kd = new KD_PALETTE(id,imgFile);' to create an object.

Initialize the artboard with the 'initCanvas(width,height)' method. The width and height of the editor can be changed by modifying the style of '<div class="kdBox f-cb"></div>'. For example, '$(".kdjs-kdBox").width(800)'

The code is as follows:

$(function () {
    var kd = new KD_PALETTE('container');
    // Initialize the Canvas
    kd.initCanvas(0,600);
});

2.2 Extension Method

2.2.1 Setting the Language

Use 'setLang(lang)' method to set and change the editor language, currently only simplified Chinese and English are supported

The code is as follows:

$(function () {
    var kd = new KD_PALETTE('container');
    // Initialize the Canvas
    kd.initCanvas(0,600);
    // Set the language (zh|en). The default value is Chinese
    kd.setLang('en');
}); 

2.2.2 Draw MOL to the drawing board

Use 'setMol(mol)' method to draw the structural formula to the drawing board.

The code is as follows:

$(function () {
    var kd = new KD_PALETTE('container');
    // Initialize the Canvas
    kd.initCanvas(0,600);
    // Mol format text
    var context = $("#molContext").val();
    // Draw MOL to the drawing board
    kd.setMol(context);
});

Examples of MOL format text are as follows:

KingDraw.mol
    KingDraw2.12D    
    0  0  0     0  0              0 V3000
M  V30 BEGIN CTAB
M  V30 COUNTS 2 1 0 0 0
M  V30 BEGIN ATOM
M  V30 1 C -7.130521 3.942292 0 0 HCOUNT=3
M  V30 2 C -6.455021 4.332292 0 0 HCOUNT=3
M  V30 END ATOM
M  V30 BEGIN BOND
M  V30 1 1 1 2
M  V30 END BOND
M  V30 END CTAB
M  END

2.2.3 MOL is obtained

Use 'getMol()' method to get the MOL text of the structural formula in the artboard.

The code is as follows:

$(function () {
    var kd = new KD_PALETTE('container');
    // Initialize the Canvas
    kd.initCanvas(0,600);
    // Get the MOL
    var molText = kd.getMol();
}); 

2.2.4 Set the callback method for opening the structure text to MOL

The 'open structure' function of the editor can draw MOL text to the artboard, the editor currently only supports MOL text, does not support other formats. You can use the 'setContentToMol(fun)' method to set the text to MOL callback method.

The code is as follows:

$(function () {
    var kd = new KD_PALETTE('container');                        
    // Initialize the Canvas
    kd.initCanvas(0,600);
    // Set the callback method to open the structure text to MOL
    kd.setContentToMol(function(cont){
    // revolution in MOL
    cont = contentToMol(cont);
       return cont;
    });
    // text-to-mol method
    function contentToMol(cont){
        ...
    }
}); 

Note: Please refer to the KD CHEM JS SDK documentation for MOL and SMILES format conversion

2.2.5 Clearing the artboard

Use 'clearCanvas()' method to clear the artboard.

The code is as follows:

$(function () {
    var kd = new kdjs('container');                                            
    // Initialize the Canvas
    kd.initCanvas(0,600);
    // Clear the artboard
    kd.clearCanvas();
}); 

Summarize

The CHEM capability was developed to provide users with basic chemical capabilities.

Call methods provided:

JS SDK

Currently available interfaces:

Interface initialization

SMILES to MOL

MOL SMILES

Introduction of JS SDK

After downloading the SDK from the website or document library [link], reference the js file in the HTML page.

Example items downloaded include:

The HTML page called by index.html

kd-chem-sdk.js Chemical capability JSSDK

kd-native-rdkit.js

kd-native-rdkit.wasm

SDK initialization

After importing kd-chenm-sdk.js and kd-native rdkit.js, you need to initialize the sdk. Call:

// Initialize the KingDraw CHEM JS SDK
kd_chem.init({
    appId: appId,//AppId
})

Note: The AppId is provided by us, please contact us if you need it

You can check whether the initialization was successful by registering the ready and error functions:

// Register the KingDraw CHEM JS SDK initialization success event
kd_chem.ready(() => {
    console.info('KD CHEM JS SDK is Ready.')
    isInit = true
    // Fire an unfinished event when ready
    ready_callback();
})
// Failed to register KingDraw CHEM JS SDK
kd_chem.error((res) => {
    const code = res.code
    const msg = res.msg
    console.error('KD CHEM JS SDK Error:' + code + ',' + msg)
})

Note: KingDraw CHEM JS SDK will pollute the global variable kd_chem when introduced, so be sure not to manipulate the assignment of this object.

MOL and SMILES transform

Directly from the local conversion via JS, no networking required. (KD-CHEM-SDK_v0.0.2 and above, Internet Explorer is not supported)

The method of use is as follows:

MOL to SMILES

kd_chem.molToSmilesWithJS(m, (result) => {
    console.log(result)
    alert(result.data)
})

SMILES to MOL

kd_chem.smilesToMolWithJS(s, (result) => {
    console.log(result)
    alert(result.data)
})

Example code download

Download address: Download