Skip to content

Demonstration of ChemAxon's MarvinJs integration into Angular Forms

Notifications You must be signed in to change notification settings

marcwittke/AngularFormsMarvinJs

Repository files navigation

ChemAxon's MarvinJS integrated into Angular Forms

marvinjsangular

Changes to package.json

Add MarvinJs package from Chemaxon

"@chemaxon/marvinjs": "^21.3.0",

You'll need an .npmrc file to contain the package source and authentication. it should looks like this:

@chemaxon:registry=https://hub.chemaxon.com/artifactory/api/npm/npm/
//hub.chemaxon.com/artifactory/api/npm/npm/:_password=base64encodedPassword
//hub.chemaxon.com/artifactory/api/npm/npm/:[email protected]
//hub.chemaxon.com/artifactory/api/npm/npm/:[email protected]
//hub.chemaxon.com/artifactory/api/npm/npm/:always-auth=true

Changes to angular.json

Configure the angular compiler to integrate the MarvinJS bits:

"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/@chemaxon/marvinjs",
"output": "./assets/marvin-js"
}
],
"styles": [
"node_modules/@chemaxon/marvinjs/gui/css/editor.css",
"src/styles.scss"
],
"scripts": [
"node_modules/@chemaxon/marvinjs/gui/lib/promise-1.0.0.min.js",
"node_modules/@chemaxon/marvinjs/js/marvinjslauncher.js",
"node_modules/@chemaxon/marvinjs/js/util.js"
]
},

For the sake of completeness you should do so for the test compilation also:

"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/@chemaxon/marvinjs",
"output": "./assets/marvin-js"
}
],
"styles": [
"node_modules/@chemaxon/marvinjs/gui/css/editor.css",
"src/styles.scss"
],
"scripts": [
"node_modules/@chemaxon/marvinjs/gui/lib/promise-1.0.0.min.js",
"node_modules/@chemaxon/marvinjs/js/marvinjslauncher.js",
"node_modules/@chemaxon/marvinjs/js/util.js"
]

Stuff the MarvinJS iframe into an Angular Component

See https://github.com/marcwittke/AngularFormsMarvinJs/blob/master/src/app/marvin-js/marvin-js-editor.component.ts

The template consists only of the iframe that loads editor.html. Also note, that this component implements ControlValueAccessor. Details on how this is done can be found at angular-university.

Integrate the MarvinJsEditorComponent into a form

This is straight forward how angular forms are working. Think of MarvinJS just as a input textbox on steroids that manipulates your structure string value with a little bit more knowledge about the semantics of this specific string.

See https://github.com/marcwittke/AngularFormsMarvinJs/blob/master/src/app/app.component.html

and https://github.com/marcwittke/AngularFormsMarvinJs/blob/master/src/app/app.component.ts

About

Demonstration of ChemAxon's MarvinJs integration into Angular Forms

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published