partridgejiang / kekule.js Goto Github PK

When I export to kekule-json object from a composer that has useAtomSpecifiedColor set to true, the useAtomSpecifiedColor: true is not set in the json. Is this possible?

Unless I'm mistaken, there is no canonical way to update the dist/ directory from the sources files. This makes contributing to the project hard. I believe the build system that updates files under dist/ should be part of the repository, along with instructions in the README or documentation.

If the present build system can't be published, I'd gladly help with configuring Webpack for Kekule.js. I had a quick glance at it on a fork, but lacked the information to go further.

Hello
I am implementing a custom dropdown using javascript. I would like to utilize DropDownButton widget which is a part of Common widgets: here.

Below is example of what I am trying to do:

Dropdown:
{
name: 'dropDownButton', // use custom button to replace bond/atom buttons
widget: Kekule.Widget.DropDownButton, // important, set the widget class
text: 'Button',
hint: 'Example Dropdown',
id: 'btnDropDown',
showDropDownMark: true,
buttonKind: 'K-Kind-DropDown',
dropDownWidget: exampleButtonGroup,
htmlClass: 'custom-dd-button'
}

dropDownWidget: [Button Group]

let exampleButtonGroup = []
exampleButtonGroup.push(
{
name: 'exButtonGroup',
widget: Kekule.Widget.ButtonGroup, // important, set the widget class
id: 'btnGroup1',
showText: true,
showGlyph: true,
htmlClass: 'custom-group-button',
childDefs: childInfos
}
)

Children:

let childInfos = [
{widget: Kekule.Widget.RadioButton, text: 'child1', className: 'custom_child_button'},
{widget: Kekule.Widget.RadioButton, text: 'child2', className: 'custom_child_button'},
{widget: Kekule.Widget.RadioButton, text: 'child3', className: 'custom_child_button'},
{widget: Kekule.Widget.RadioButton, text: 'child4', className: 'custom_child_button'},
{widget: Kekule.Widget.RadioButton, text: 'child5', className: 'custom_child_button'}
];

It would be a great help if you can provide Demo/Example on how we can implement Common Widgets using javascript.

I've been trying to carefully illustrate the different classes of use cases I'm seeing.

I noticed that the clone function will drop LinkedConnectors and LinkedObjs, etc.

In fixed-sized Viewer molecule are not scaled to Viewer size. It is not a problem for small molecule but for big only part of structure is display. Is is possible somehow to force scaling big (which not fit to viewer size) molecule ?

Found some weird scenarios, best shown with pictures. In my case, I'm comparing structures with 2 stereo bonds, and I'm really testing for isometry here.

First case, same structure, it correctly matches them:

Second case, I drop the Oxygen to the other side, and again, it correctly knows that these structures no longer match:

Then it starts getting weird.

Third case, I drop the Nitrogen below the left bond, but it still thinks they match

There are other variants as well.

Fourth case, I pull the Chlorine above the bond on the right, and it still thinks they match:

Another version of the previous:

Seems like something in the parity calculation breaks down. Right?

I am working on a project with the Eshelman School of Pharmacy at UNC, and we were considering using your open-source Kekule.js(specifically the Chem Composer).

I want to find the location of the 'Save Molecule' code in your files as we will need to modify that feature.

Can I contact you through email?

Thanks,
Om Suchak,

Machine Learning Intern at UNC Eshelman School
[email protected]
https://www.linkedin.com/in/omsuchak/

Steps to Reproduce

1. Go to demo site: http://partridgejiang.github.io/Kekule.js/demos/demoLauncher.html?id=chemEditor
2. Clear out the canvas to make it empty
3. Create the molecule:
   
4. Click "Save"
5. See error appear in console: algorithm.min.js

Expected Behavior

Should open the the window which has a parsed structure that can be saved as a file.
Note* This also breaks structure compare.

I've updated my kekule files to the latest version of kekule and the single electron button no longer works. I am setting the electronCount to 1 but it is getting overwritten somewhere to be 2.

The demo page (http://organic.cpu.edu.cn/~partridge/Kekule.js/demos/composerButtons/composerButtons.html) works great! I took the files used in that and it fixes the issue I am seeing. So Im pretty sure its something in the latest version of Kekule. What version is the demo using?

I also had a question on the demo.
Why are you using

 var composer = Kekule.Widget.getWidgetById('composer');

instead of

var composer = new Kekule.Editor.Composer(document.getElementById('div1'));

?

Is it just another way to do the same thing?

Thanks so much for your help!!! ^_^

Using the npm module in angular trigger an error in the init() function due to the document being undefined.
There is a stack overflow issue opened 10 months ago.
https://stackoverflow.com/questions/41192296/external-javascript-library-in-angular-cli-project-throws-error-that-root-docum

Any guidance for using this npm package in angular?
Thanks

Is there anyway to set the composer config when the composer is loaded from the viewer (loadEditor button). For example I'd like to set "Element specified colors=true" as the default when the composer is opened from a viewer.

Steps to Reproduce

1. Go to http://partridgejiang.github.io/Kekule.js/demos/demoLauncher.html?id=structCompare
2. Build out the two structures:
   
3. Click "Compare Molecules"

Expected Behavior

Structure compare returns false

Actual Behavior

Structure compare returns true

Hey! This thing looks pretty neat. There is no license included with the source code that I can find. Can a license be included? Thanks.

In many places in the documentation, there is a reference to a page for Kekule.ChemWidget.Viewer.
For instance: http://partridgejiang.github.io/Kekule.js/documents/api/chemWidget/Kekule.ChemWidget.Viewer2D.html

It says that Viewer2D extends Viewer, however, there is not documentation for Viewer.

Hi, I have a simple representation:

function showMolecule2D(mol) {
  Kekule.Widget.getWidgetById('chemViewer2D').setChemObj(mol);
  Kekule.Widget.getWidgetById('chemViewer2D').setToolButtons(['molDisplayType', 'zoomIn', 'zoomOut']);
}

The output for this function is a molecule representation:

But the Nitrogens and Oxygens of this molecule have not the typical blue / red color as in the kekule composer. Is there any way to pass a parameter or call a method to do that in my code?

Thanks.

I see in the docs that we can get the objects selected with
var selObjs = composer.getSelection();

How do I do the reverse (i.e. select objects based on their className and id)?

When deleting a structure to a blank canvas in composer, the export of the KCJ leaves:

{"__type__":"undefined"}

But, trying to render this, throws an error in the composer when fed this KCJ. This happens in the editorEnhancement branch

I can't figure out how to add multiple molecules. Using setChemObj as described here in sequence doesn't work because each call overrides the previous. Is there some way I can add multiple molecules using the current APIs?

When I load a Kekule-JSON into a composer the objects are not centered. Anyway to auto center in composer? Thanks much!

I do this to load up the structure
var structure = Kekule.IO.loadFormatData(answersjon, 'Kekule-JSON');
composer.setChemObj(structure);

Hi, first thanks for you time developing this library, i have a question, how can i obtain a molecule mass? In some objects i can use molecule methods how .getNodes() and take getAtomicMass(); but atoms object not always have this method.

I saw a datatable plugin example but this data is precalculated.

Thanks.

Hey Kekule team,

It seems that Kekule is extending the prototype of arrays (possibly objects as well?) with enumerable function such as first(). I was wondering if you can resolve these functions to the Kekule namespace instead of extending the prototype. I have a Node.js app which renders my pages with templated files and the prototype extension is causing the rendering on my site to break. I also have a separate app that has a lot of legacy systems (a lot of tech debt) that may be using the for(...in...) and other antiquated ways of iterating over objects and arrays. Is there a way this can be resolved?

PS: Thank you so much for all of your quick iterations on all of the issues so far. I am extremely thankful for the active and continued support

Best,
Aaron Llanos

I just yesterday started using your library and it appears the documentation has been overwritten. Just wanted to bring it to your attention if this was unintentional!

Related to #81
Seeing similar but slightly different behavior after original issue was addressed. See attached image below.

Hi

I'm wondering if anyone has demoed or thought about ways in which kekule.js might be integrated with Jupyter notebooks?

I have put together a binderhub container with a range of chemistry related Python packages at https://beta.mybinder.org/v2/gh/psychemedia/showntell/chemistry . My aim is to explore how to blend rich interactive displays with narrative text (eg to support the authoring and use of interactive online educational materials) but it's early days yet.

I'm wondering what integration might mean? Using kekule.js as a visual editor and exporting SMILES strings into the parent environment? Pass SMILES strings from Python into kekule.js?

It would be amazing if this could be written as a web component. I'm not sure if the authors are familiar with web components, but they offer some extraordinary benefits that are becoming standard in all of the major browsers. As it is, I'm wary to use this library because it isn't a web component, and I can foresee some difficulties with incorporating it into our codebase. If it were a web component, we could use it almost as easily as any other HTML element. Thank you for the consideration, I'm happy to discuss this more.

Hello,

My question is quite simple, but after hours I didn't manage to make it works.
Let's say I have the following Element :

<div class="kekule-mol K-Widget K-Chem-Viewer K-Chem-Viewer2D K-NonSelectable K-Layout-H K-State-Normal ng-scope" data-autofit="true" data-chem-obj="{" id":"m1","coordpos2d":0,"coordpos3d":0,"renderoptions":{"expanded":true,"__type__":"object"},"coord2d":{"x":7.765333333333333,"y":44.970666666666666,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"kekule.atom","id":"a1","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":0,"y":-0.7999999999999972,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"},{"__type__":"kekule.atom","id":"a2","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":0.6928203230275516,"y":-0.3999999999999986,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"},{"__type__":"kekule.atom","id":"a3","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":0.6928203230275516,"y":0.3999999999999986,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"},{"__type__":"kekule.atom","id":"a4","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":0,"y":0.7999999999999972,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"},{"__type__":"kekule.atom","id":"a5","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":-0.6928203230275507,"y":0.3999999999999986,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"},{"__type__":"kekule.atom","id":"a6","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":-0.6928203230275516,"y":-0.3999999999999986,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"},{"__type__":"kekule.atom","id":"a9","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":1.3856406460551005,"y":-0.7999999999999972,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"},{"__type__":"kekule.atom","id":"a10","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":2.0784609690826494,"y":-0.3999999999999986,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"},{"__type__":"kekule.atom","id":"a11","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":2.0784609690826494,"y":0.3999999999999986,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"},{"__type__":"kekule.atom","id":"a12","coordpos2d":0,"coordpos3d":0,"coord2d":{"x":1.3856406460551005,"y":0.7999999999999972,"__type__":"object"},"charge":0,"parity":null,"isotopeid":"c"}],"anchornodes":[],"connectors":[{"__type__":"kekule.bond","id":"b1","coordpos2d":0,"coordpos3d":0,"parity":null,"bondtype":"covalent","bondorder":1,"electroncount":2,"isinaromaticring":false,"connectedobjs":[0,1]},{"__type__":"kekule.bond","id":"b2","coordpos2d":0,"coordpos3d":0,"bondtype":"covalent","bondorder":2,"electroncount":4,"isinaromaticring":false,"connectedobjs":[1,2]},{"__type__":"kekule.bond","id":"b3","coordpos2d":0,"coordpos3d":0,"parity":null,"bondtype":"covalent","bondorder":1,"electroncount":2,"isinaromaticring":false,"connectedobjs":[2,3]},{"__type__":"kekule.bond","id":"b4","coordpos2d":0,"coordpos3d":0,"bondtype":"covalent","bondorder":2,"electroncount":4,"isinaromaticring":false,"connectedobjs":[3,4]},{"__type__":"kekule.bond","id":"b5","coordpos2d":0,"coordpos3d":0,"parity":null,"bondtype":"covalent","bondorder":1,"electroncount":2,"isinaromaticring":false,"connectedobjs":[4,5]},{"__type__":"kekule.bond","id":"b6","coordpos2d":0,"coordpos3d":0,"bondtype":"covalent","bondorder":2,"electroncount":4,"isinaromaticring":false,"connectedobjs":[5,0]},{"__type__":"kekule.bond","id":"b8","coordpos2d":0,"coordpos3d":0,"bondtype":"covalent","bondorder":2,"electroncount":4,"isinaromaticring":false,"connectedobjs":[1,6]},{"__type__":"kekule.bond","id":"b9","coordpos2d":0,"coordpos3d":0,"parity":null,"bondtype":"covalent","bondorder":1,"electroncount":2,"isinaromaticring":false,"connectedobjs":[6,7]},{"__type__":"kekule.bond","id":"b10","coordpos2d":0,"coordpos3d":0,"bondtype":"covalent","bondorder":2,"electroncount":4,"isinaromaticring":false,"connectedobjs":[7,8]},{"__type__":"kekule.bond","id":"b11","coordpos2d":0,"coordpos3d":0,"parity":null,"bondtype":"covalent","bondorder":1,"electroncount":2,"isinaromaticring":false,"connectedobjs":[8,9]},{"__type__":"kekule.bond","id":"b12","coordpos2d":0,"coordpos3d":0,"bondtype":"covalent","bondorder":2,"electroncount":4,"isinaromaticring":false,"connectedobjs":[9,2]}],"__type__":"kekule.structureconnectiontable"},"__type__":"kekule.molecule"}"="" data-mol-2000="unnamed Kekule 10231809372D 10 11 0 0 0 0 0 0 0 0999 V2000 7.7653 44.1707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 8.4582 44.5707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 8.4582 45.3707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 7.7653 45.7707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 7.0725 45.3707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 7.0725 44.5707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 9.1510 44.1707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 9.8438 44.5707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 9.8438 45.3707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 9.1510 45.7707 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 1 2 1 0 0 0 0 2 3 2 0 0 0 0 3 4 1 0 0 0 0 4 5 2 0 0 0 0 5 6 1 0 0 0 0 6 1 2 0 0 0 0 2 7 2 0 0 0 0 7 8 1 0 0 0 0 8 9 2 0 0 0 0 9 10 1 0 0 0 0 10 3 2 0 0 0 0 M END" data-predefined-setting="basic" data-widget="Kekule.ChemWidget.Viewer2D" draggable="false" id="chemViewer-hm0ohsj1qyj"><div class=" K-Dynamic-Created K-Chem-Displayer-DrawContext-Parent K-Corner-All" style="width: 100%; height: 298px;"><canvas width="298" height="298" style="width: 298px; height: 298px;"></canvas></div><span class=" K-Widget K-Normal-Background K-Container K-Toolbar K-Button-Group K-NonSelectable K-Corner-All K-No-Wrap K-Layout-H K-State-Normal K-Dynamic-Created K-Text-Hide K-Glyph-Show K-Chem-InnerToolbar K-Chem-Viewer-Embedded-Toolbar" draggable="false" style="display: none; bottom: 10px;"><button class=" K-Widget K-Button K-NonSelectable K-No-Wrap K-Text-Hide K-Glyph-Show K-First-Child K-Layout-H K-Chem-SaveFile K-State-Normal K-Corner-Leading" draggable="false" title="Save to file" type="button"><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Pri-Glyph-Content"></span><span class=" K-Content K-Text-Content K-Dynamic-Created">Save...</span><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Assoc-Glyph-Content"></span></button><button class=" K-Widget K-Button K-Compact-Button K-NonSelectable K-No-Wrap K-Text-Hide K-Glyph-Show K-Layout-H K-State-Normal K-Chem-MolDisplaySkeletal" draggable="false" title="Change molecule display style" type="button"><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Pri-Glyph-Content"></span><span class=" K-Content K-Text-Content K-Dynamic-Created">Skeletal</span><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Assoc-Glyph-Content"></span><span class="K-Compact-Mark"></span></button><button class=" K-Widget K-Button K-NonSelectable K-No-Wrap K-Text-Hide K-Glyph-Show K-Layout-H K-State-Normal K-Chem-ZoomIn" draggable="false" title="Zoom in" type="button"><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Pri-Glyph-Content"></span><span class=" K-Content K-Text-Content K-Dynamic-Created">Zoom In</span><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Assoc-Glyph-Content"></span></button><button class=" K-Widget K-Button K-NonSelectable K-No-Wrap K-Text-Hide K-Glyph-Show K-Layout-H K-State-Normal K-Chem-ZoomOut" draggable="false" title="Zoom out" type="button"><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Pri-Glyph-Content"></span><span class=" K-Content K-Text-Content K-Dynamic-Created">Zoom Out</span><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Assoc-Glyph-Content"></span></button><button class=" K-Widget K-Button K-NonSelectable K-No-Wrap K-Text-Hide K-Glyph-Show K-Layout-H K-State-Normal K-Chem-Viewer-Edit" draggable="false" title="Open an editor to modify displayed object" type="button"><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Pri-Glyph-Content"></span><span class=" K-Content K-Text-Content K-Dynamic-Created">Edit...</span><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Assoc-Glyph-Content"></span></button><button class=" K-Widget K-Button K-NonSelectable K-No-Wrap K-Text-Hide K-Glyph-Show K-Last-Child K-Layout-H K-State-Normal K-Res-Button-NoCancel K-Corner-Tailing" draggable="false" title="Delete the molecule" type="button"><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Pri-Glyph-Content"></span><span class=" K-Content K-Text-Content K-Dynamic-Created">Delete</span><span class=" K-Content K-Glyph-Content K-Dynamic-Created K-Assoc-Glyph-Content"></span></button></span></div>

Everything is actually working if this Dom Element exists on page load.
But if I add it manually to the dom After Kekule has been initialized, the viewer doesn't show up (I understand why).

So now I'd like to tell kekule to re-init itself. Something like
Kekule.init(document)

How do I do this ?

Thank you by advance and sorry to create an issue for simple usage purpose.

Attached below is an example of a bug that is found running the latest source code from 6a3ff5e in the compare molecules demo locally. There are a few other bugs which are related to the same problem of no parent element being defined in this call stack.

Description:

• Localize the editor configs to be encapsulated into each instance of Composer.

Observed Behavior:

• When on structure comparison (or any other page with more than one Kekule.Composer on it) with two SKELETAL set editors, by setting the Molecule display type from SKELETAL to CONDENSED the editor updates where the configuration was changed. Now go to a different editor on the page without touching it's display settings and update the molecule (i.e. add a bond). Observe the display to be updated as CONDENSED as well.

Expected Behavior:

• The first editor to display CONDENSED molecule while the second editor to display SKELETAL until I update the display settings manually.

How can I display reaction from smiles (e.g. CCO.C(=O)O>>C(=O)OCC )in Viewer2D? As I can see it is not possible to export/import it directly from smiles. My first idea is: a) export each mol to kcj, b) edit coordinates (move each atom), c) add plus signs and narrow; d) save to kcj and load such file. Do you have any better idea?

I noticed there is documentation on making custom buttons here.. The following code is what I am looking at more specifically:

chemViewer.setToolButtons([
  'saveData', 'zoomIn', 'zoomOut'
  {
    'text': 'Custom',  // button caption
    'htmlClass': 'K-Res-Button-YesOk',  // show a OK icon
    'showText': true,   // display caption of button
    '#execute': function(){ alert('Custom button'); }  // event handler when executing the button
  }
]);

I am trying to build a button to basically do what the bond button does to better understand how to build custom buttons. My main two objectives are:

1. For a button to hold an active state which the composer understands it's toggled on that button.
   • I think on this one I want to call #activate instead of #execute. I got that from looking at the Button class in the docs. I do understand that there is a #deactivate callback which is used for cleanup and give the composer back full control of whatever else it needs to do?
   • Or maybe I just want to make a custom button class that extends Kekule.Widget.Button? Not sure?
   • I guess I was also wondering why the Kekule.Widget.Button class is not used here in the example instead of a regular JSON object which just contains some properties and methods the class implements in private scope?
2. To learn how to interact with the grid event listeners to get coordinates when clicked in a 2D view.
   • I believe that I want to pay attention to either the BaseEditorIaController or the ActionComposerSetIaController?

The download link in the github page is still a release 5 months ago, and it can't be utilized correctly (compressed script). Another suggestion is to create link to the most recent release (I mean the zip file in the repo). Don't use different file names. You can just hyperlink the download link to the most recent release on master branch.

Messing with the charge button, it gives me the option to add radicals, but I can't draw out lone pairs. Other libraries have similar functionality to add multiple lone pairs to an atom. Similar to how Kekule bonds work, with evenly spacing out lone pairs and radicals around an atom. Is this an intended feature for Kekule? Or would I have to build something out like that myself? I don't mind either approach but some beginning steps on how to attack the problem might help me out.

Thanks!

I would like to show SMILES in 2D on a web browser, and found Kekule.js.

I wrote this code below and I was able to do what I wanted.

html

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/kekule/kekule.js?modules=chemWidget,openbabel,indigo"></script>
  </head>
  <body>
    <p>This is a test.</p>
    <textarea placeholder="Please insert text."></textarea>
    <div id="kekule">
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

Javascript

Kekule.Indigo.enable();

$(window).on('load', function () {
  chemViewer = new Kekule.ChemWidget.Viewer(document.getElementById('kekule'));
  var smi = "CCN(c1cc(C)ccc1C)S(=O)(=O)c1cc(C(N)=O)n(C)c1";
  var mol = Kekule.IO.loadFormatData(smi, "smi");
  chemViewer.setChemObj(mol);
});

However, it seems that it takes a long time to enable Kekule.Indigo, and I cannot type anything into textarea until it is loaded.

If you know how to make it enable faster or load it simultaneously, please let me know.

Thank you.

Hi Patridge, first of all thanks for your great work in this plugin. It's becoming very useful for our own chemistry app collection (www.playmolecule.org).

I am facing a problem when drawing a specific subset of molecules, specially when I am trying to link couple of rings together such as in the following case:

I then retrieve the smiles or mol with the following code:

var mols = composer.getChemObj();  
var smi = Kekule.IO.saveFormatData(mols, 'smi');

The molecule retrieved (in smiles) is the following:

C1CCCC1.c2(C)ccccc2

What bothers me is that most of the programs in the back-end (rdkit, htmd) for molecule reading will interpret the string as two different molecules, probably caused by the dot (".") in the smiles string. The same happens when using mol format (presumably because missing connectivity between the rings, haven't tested it).

Is this the intended behavior? Maybe I am missing the point on how to use the widget. The intuitive behavior for me is to draw a ring, then click on "Bond tool", click on the atom of the ring I want a bond attached to, then click on "Ring structures", select my ring and click on the extreme of the recently added bond. This however, results in two different molecules when I was expecting one.

Thanks for your help.

Since the last false positive I reported, I really wanted to make sure, but I was able to reproduce it on the official demo page, using the compare tool in master, as well as the compare tool in our branch.

Is it possible to kekulize structure with kekule? I want import structure (from e.g. molfile) with aromatic bond and export it as a conjugated single-double bonds. Or do you know any js-lib (which can work in web-browser enviroment) which can do this?

Hello!
Im trying to figure out how to configure different properties for a composer and the tutorial page says to check out the renderConfig and editorConfig properties. But the composer docs don't have a renderConfig property and it isn't obvious on how to change the editorConfig properties.

Is there an example somewhere that I can refer to on how to change these when I first create a composer?

Thanks!

I think that it'll probably be really useful to people to have kekule on npm to integrate it into their existing workflow (like the majority of JS code nowadays can be found there).

I noticed some strange behavior when using chemViewer with bootstrap tabs. Here's a JSfiddle that demonstrates. https://jsfiddle.net/cleblond/njy0vsrb/23/

Click on the Home tab and you'll see the viewer is off the page or something.

Thanks for the great tool!

That would be very useful for debugging.

These shouldn't match right?

If you customize the Chem Composer to only have some of the Style Tool Components, the manipulate and atom buttons start throwing errors in the console log. Using the manipulate button also causes weird behaviors and makes the composer unusable.

I've tested this on the demo page of the chem composer and get the same result.
Steps to Recreate Error and Behavior:

• Go to http://partridgejiang.github.io/Kekule.js/documents/tutorial/examples/composer.html
• Open Console Log
• Turn off all in the Style Toolbar Components (*More details on this below)
• Click Apply
• Use the Manipulate Tool to click (not click and drag, just click) on a bond or atom
• Look at Console Log and you will see an error (pictures attached)
• If you continue to try and interact with the bonds or atoms weird behavior starts to happen.
  ex. Bonds start to disappear or jump way off the canvas.

*If you only turn off fontName or fontSize, this doesn't seem to happen. It only happens when color, textDirection, or textAlign are turned off.

Ive attached 2 pictures of the error. One from the demo page but that is using the min file so I run a local version of kekule to get a second more detailed picture of the error.

Thanks! ^_^

I selected benzene ring from menu and after two clicks I end up with structure presented in the picture below.
. Also SMILES obtained for this is incorrect ( C1=CC=2=C(C=C1)=CC=CC=2 ).
Such a way (adding another benzene ring) is the most procedure to draw polycyclic aromatic hydrocarbons.

Hi guys,

Just been reading the tutorial and nearly all the examples I can find of Kekule.IO.loadFormatData() uses the 'cml' type. I was wondering, is it possible to use the 'smi' type to load data into the viewer?

For example, I have a smiles string as follows:

var smiles = "C2=Cc1ccccc1C2";

However, when I use:

var mol = Kekule.IO.loadFormatData(smiles, 'smi');

I receive an error message saying "Can not read data of format: smi"

How does one get around this?

Kind Regards

Any plans to add support for electron pushing/curved arrows as would be used in organic reaction mechanisms?

As the title said i would like to know if there is the possibility to toggle the enable status in some way for the chemspaceEditor element.
I've tryied to set it using the standard html5 attribute "disabled" (statically in the DOM) and it works.
If I try to set it using jQuery it doesn't seems to affect the element.
Thank you so much for the help.

Hello,
I'm looking for a converter to correctly load data from json. Here's an example.

// Init
var chemEditor = new Kekule.Editor.ChemSpaceEditor(doc, null, Kekule.Render.RendererType.R2D);
var chemComposer = new Kekule.Editor.Composer(elem, chemEditor);
...
// Retreive
var molObj = chemComposer.exportObj(Kekule.StructureFragment);
var molJson = // How to get the Json object correctly ?

// Display
var emmbedMolView = '<span style="display:block;border:1px solid black;width:300px;height:300px" data-widget="Kekule.ChemWidget.Viewer2D" data-chem-obj="' + molJson + '" data-predefined-setting="basic" data-caption="Molecule-X"></span>';
...

There must be a method for this but didn't manage to find it. I tried with JSON.stringify but it leads to circular error. Same thing with chemComposer.saveObj(molObj, 'json');
I don't want to use script tag nor file as ressources.

Thanks,

EDIT: Finally found it.
var molJson = Kekule.IO.saveFormatData(molObj, 'Kekule-JSON');
This line really should be in http://partridgejiang.github.io/Kekule.js/documents/tutorial/content/molIO.html#saving-molecule

References: #32
Steps to duplicate:

Begin any project with webpack base.

yarn add kekule

In a js file you import from index.html:

import {Kekule} from 'kekule'
or 
const {Kekule} = require('kekule')

console.log(Kekule)

Now run webpack to minify your project and open the output file and receive:

kekule.js:504 Uncaught TypeError: Cannot read property 'getElementsByTagName' of undefined
    at analysisEntranceScriptSrc (kekule.js:504)
    at init (kekule.js:631)
    at kekule.js:671
    at Object.<anonymous> (kekule.js:673)
    at Object.defineProperty.value (page.js:128749)
    at __webpack_require__ (bootstrap 2cce55343c358056e4dd:19)
    at Object.Array.indexOf.i (kekule.composer.component.js:4)
    at __webpack_require__ (bootstrap 2cce55343c358056e4dd:19)
    at Object.<anonymous> (moldraw.js:6)
    at __webpack_require__ (bootstrap 2cce55343c358056e4dd:19)
    at webpackContext (.*\.js$:111)
    at sl.module.factory.js:11

In this particular case, we see that document is undefined. In #32 we see that passing the window object works for the webpack compiler but when the script is trying to load in the browser we get errors that it cannot find the proper files. This is because webpack did not see explicit requires of those files and loses them in the build process.

Potential Fixes:

1. Instead of appending to a script tag to them DOM, check if webpack was used and instead require the scripts.

• Cons:
  • Each file must now officially export the class it's building since webpack compilation for the browser does not have access to vm.runInThisContext.
  • Each file imported to kekule.js must now be imported and exported appropriately for webpack and node

2. Somehow figure out how to import a context of a module. Basically to do for webpack what vm.runInThisContext does for node.

• Cons:
  • It doesn't exist (to my knowledge)