search

partridgejiang / Kekule.js

A Javascript cheminformatics toolkit.
http://partridgejiang.github.io/Kekule.js
MIT License
250 stars 61 forks source link

Manually init Kekule for current DOM ? #89

Closed mpomet closed 5 years ago

mpomet commented 5 years ago

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.

AaronLlanos commented 5 years ago

It looks like you are loading the item through angular because of the ng-scope tag. I think I see the reason you are asking this question because I faced a similar problem when integrating with React. Have you seen anything in the library in relation to the Kekule.IO documentation? Kekule.IO.loadFormatData(KekuleJSONObj, 'Kekule-JSON') may be more up your alley so you no longer have to pass in the data-chem-obj property on your Kekule div.

cleblond commented 5 years ago

Maybe the angular $compile component would help.

mpomet commented 5 years ago

@AaronLlanos Yes thank you that works. I was looking for global method but finally I used your answer and apply it manually for all Kekule-div in the dom. Not really elegant, but functionnal.