Skip to content

Commit

Permalink
release v0.3.5-alpha
Browse files Browse the repository at this point in the history 
 * improved molecule scaling
 * enhanced demo
  • Loading branch information
@fbroda
fbroda committed Mar 12, 2021
1 parent 73058ac commit 848b134
Show file tree
Hide file tree
Showing 9 changed files with 117 additions and 47 deletions.
17 changes: 16 additions & 1 deletion docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,22 @@ <h1 id='heading'>MolPaintJS</h1>
<div id="debug"></div>
<table>
<tr><th>Editor</th><th></th><th>Viewer</th></tr>
<tr><td><div id="mol"></div></td><td><div style="padding:40px">&nbsp;</div></td><td><div id="viewer" style="padding-top:40px"></div></td></tr>
<tr><td><div id="mol"></div></td><td><div style="padding:40px">&nbsp;</div></td><td><div id="viewer" style="padding-top:40px"></div>
<div style="width:280px">By hovering over the text typed in bold, you can highlight the corresponding regions of the
<span style="font-weight:bold;"
onmouseover='molPaintJS.CollectionHandler("viewer").highlight("all atoms and bonds");'
onmouseout='molPaintJS.CollectionHandler("viewer").highlight("");'>cholecalciferol</span> molecule:
<span style="font-weight:bold;"
onmouseover='molPaintJS.CollectionHandler("viewer").highlight("Ring A");'
onmouseout='molPaintJS.CollectionHandler("viewer").highlight("");'>Ring A</span>,
<span style="font-weight:bold;"
onmouseover='molPaintJS.CollectionHandler("viewer").highlight("Ring C");'
onmouseout='molPaintJS.CollectionHandler("viewer").highlight("");'>Ring C</span> or
<span style="font-weight:bold;"
onmouseover='molPaintJS.CollectionHandler("viewer").highlight("Ring D");'
onmouseout='molPaintJS.CollectionHandler("viewer").highlight("");'>Ring D</span>.
</div>
</td></tr>
</table>
<script type="text/javascript">
molPaintJS.newContext("mol", {helpURL:"help/index.html", iconSize: 32, debugId: "debug"}).init().setMolecule("3-Acetylcoumarin\n MolPaintJS\n\n 14 15 0 0 0 0 0 0 0 0999 V2000\n -2.1434 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -2.1434 -0.8250 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.4289 -1.2375 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.7145 -0.8250 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.7145 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.4289 0.4125 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 -1.2375 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 0.7145 -0.8250 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.7145 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 0.4125 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.4289 0.4125 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 2.1434 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.4289 1.2375 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1.4289 -1.2375 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0 \n 2 3 1 0 \n 3 4 2 0 \n 4 5 1 0 \n 5 6 2 0 \n 6 1 1 0 \n 4 7 1 0 \n 7 8 1 0 \n 8 9 1 0 \n 9 10 2 0 \n 10 5 1 0 \n 9 11 1 0 \n 11 12 1 0 \n 11 13 2 0 \n 8 14 2 0 \nM END\n").setChangeListener(changeListener);
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "molpaintjs",
"version": "v0.3.4-alpha",
"version": "v0.3.5-alpha",
"description": "Toolkit for drawing chemical structures",
"browser": "molpaintjs/js/molpaint.js",
"main": "molpaintjs/js/molpaint.js",
Expand Down
7 changes: 4 additions & 3 deletions src/BondTool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,8 @@ var molPaintJS = (function (molpaintjs) {
onMouseMove : function (x, y, evt) {
if (atomA == null) { return; }

var coord = this.context.getView().getCoordReverse(x, y);
var view = this.context.getView();
var coord = view.getCoordReverse(x, y);

this.context.getMolecule().delTemp();
var atomId = this.context.getMolecule().selectAtom(coord, distMax);
Expand All @@ -131,8 +132,8 @@ var molPaintJS = (function (molpaintjs) {

var i = Math.floor(w / 30.0);
atomB = molPaintJS.Atom();
atomB.setX(atomA.getX() + this.context.getRasterX(i));
atomB.setY(atomA.getY() + this.context.getRasterY(i));
atomB.setX(atomA.getX() + view.getRasterX(i));
atomB.setY(atomA.getY() + view.getRasterY(i));
atomB.setZ(0.0);
atomB.setTemp(1);
var at = molPaintJS.AtomType();
Expand Down
17 changes: 17 additions & 0 deletions src/Box.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,14 @@ var molPaintJS = (function (molpaintjs) {
}
},

center : function () {
minX -= centerX;
maxX -= centerX;
minY -= centerY;
maxY -= centerY;
return this;
},

contains : function (x, y) {
return (minX < x)
&& (maxX > x)
Expand Down Expand Up @@ -170,6 +178,7 @@ var molPaintJS = (function (molpaintjs) {
maxY = (maxY > box.getMaxY()) ? maxY : box.getMaxY();
centerX = (minX + maxX) / 2.0;
centerY = (minY + maxY) / 2.0;
return this;
},

getCenterX : function() {
Expand All @@ -180,6 +189,14 @@ var molPaintJS = (function (molpaintjs) {
return centerY;
},

getDeltaX : function() {
return maxX - minX;
},

getDeltaY : function() {
return maxY - minY;
},

getMaxX : function() {
return maxX;
},
Expand Down
7 changes: 4 additions & 3 deletions src/ChainTool.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,8 @@ var molPaintJS = (function (molpaintjs) {

this.context.getMolecule().delTemp();

var coord = this.context.getView().getCoordReverse(x, y);
var view = this.context.getView();
var coord = view.getCoordReverse(x, y);
var dx = coord.x - atomA.getX();
var dy = coord.y - atomA.getY();
var len = Math.sqrt((dx * dx) + (dy * dy));
Expand Down Expand Up @@ -117,8 +118,8 @@ var molPaintJS = (function (molpaintjs) {
var atom = molPaintJS.Atom();
var k = ((n % 2) == m) ? i : j;
n++;
dx += this.context.getRasterX(k);
dy += this.context.getRasterY(k);
dx += view.getRasterX(k);
dy += view.getRasterY(k);
atom.setX(atomA.getX() + dx);
atom.setY(atomA.getY() + dy);
atom.setZ(0.0);
Expand Down
33 changes: 4 additions & 29 deletions src/Context.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@ var molPaintJS = (function (molpaintjs) {
var currentElement = molPaintJS.Elements.getElement("C");
var currentTemplate = mp.getTemplates()[0];

var medianBondLength = 1.5;
var rasterX = [];
var rasterY = [];

var tools = null;
var currentTool = null;
var currentBondTool = null;
Expand Down Expand Up @@ -121,12 +117,6 @@ var molPaintJS = (function (molpaintjs) {
getProperties : function () {
return properties;
},
getRasterX : function(i) {
return rasterX[i];
},
getRasterY : function(i) {
return rasterY[i];
},
getTools : function () {
return tools;
},
Expand Down Expand Up @@ -155,24 +145,11 @@ var molPaintJS = (function (molpaintjs) {
ctx.setCurrentTool(ctx.getTools().pointerTool);
ctx.getWidget().initEvents(ctx);
}
ctx.initRaster();
ctx.getView().initRaster(molecule);
});
return this;
},

/**
* compute median bond length and init raster of bond angles
*/
initRaster : function() {
medianBondLength = molecule.computeBondLengths();

for(var i=0; i<15; i++) {
rasterX[i] = Math.cos(i * Math.PI / 6.0) * medianBondLength;
rasterY[i] = Math.sin(i * Math.PI / 6.0) * medianBondLength;
}
},


/**
* Paste a molecule (from clipboard) into the
* current molecule. Update the history accordingly.
Expand Down Expand Up @@ -215,7 +192,7 @@ var molPaintJS = (function (molpaintjs) {
}
history.appendAction(actionList);

this.initRaster();
view.initRaster(molecule);
this.draw();
return actionList;
},
Expand Down Expand Up @@ -272,11 +249,9 @@ var molPaintJS = (function (molpaintjs) {
return;
}

molecule.center();
view.center();

this.initRaster();
view.setMolScale(properties.molScaleDefault / medianBondLength);
view.initRaster(molecule);
view.setDisplayScale(molecule, true);
this.draw();
return this;
},
Expand Down
61 changes: 53 additions & 8 deletions src/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,11 @@ var molPaintJS = (function (molpaintjs) {
var displayScale = 1.0;
var fontFamily = prop.fontFamily;
var fontSize = prop.fontSize;
var molScale = prop.molScaleDefault;
var medianBondLength = 1.5;
var molScaleDefault = prop.molScaleDefault;
var molScale = molScaleDefault / medianBondLength;
var rasterX = [];
var rasterY = [];
var sizeX = prop.sizeX;
var sizeY = prop.sizeY;
var subscriptFactor = prop.subscriptFactor;
Expand Down Expand Up @@ -121,6 +125,14 @@ var molPaintJS = (function (molpaintjs) {
};
},

getRasterX : function(i) {
return rasterX[i];
},

getRasterY : function(i) {
return rasterY[i];
},

getSizeX : function () {
return sizeX;
},
Expand Down Expand Up @@ -152,6 +164,19 @@ var molPaintJS = (function (molpaintjs) {
viewContext.font = fontSize + "px " + fontFamily;
},

/**
* compute median bond length and init raster of bond angles
*/
initRaster : function(mol) {
medianBondLength = mol.computeBondLengths();

for(var i=0; i<15; i++) {
rasterX[i] = Math.cos(i * Math.PI / 6.0) * medianBondLength;
rasterY[i] = Math.sin(i * Math.PI / 6.0) * medianBondLength;
}
molScale = molScaleDefault / medianBondLength;
},

scaleDisplay : function (s) {
displayScale *= s;
},
Expand All @@ -164,6 +189,33 @@ var molPaintJS = (function (molpaintjs) {
viewContext.font = fontSize + "px " + fontFamily;
},

/**
* set the display scaling factor
* @param mol the current molecule
* @param center true if molecule should be centered
*/
setDisplayScale : function (mol, center) {

var molbox;
var x = sizeX - 40; // leave some margin
var y = sizeY - 40;

if (center) {
molbox = this.getBBox(mol.center());
} else {
molbox = this.getBBox(mol.computeBBox(0));
}
displayScale = 1.0;

if (molbox.getDeltaX() > x) {
displayScale = x / molbox.getDeltaX();
}
if (molbox.getDeltaY() > y) {
var f = y / molbox.getDeltaY();
displayScale = (f < displayScale) ? f : displayScale;
}
},

/**
* set the viewContext.font property to the default font
*/
Expand All @@ -179,13 +231,6 @@ var molPaintJS = (function (molpaintjs) {
viewContext.font = f + "px " + fontFamily;
},

/**
* set the molecule scaling factor
*/
setMolScale : function (s) {
molScale = s;
},

/**
* set superscript / subscript size
*/
Expand Down
3 changes: 2 additions & 1 deletion src/Widget.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -655,7 +655,8 @@ var molPaintJS = (function (molpaintjs) {
+ "</table>"
+ "</div>"
} else {
widgetObject.innerHTML = renderCanvas();
widgetObject.innerHTML = "<div id='" + widgetId + "_modalDlg' class='molPaintJS-modalDlg'></div>"
+ renderCanvas();
}
}
};
Expand Down
17 changes: 16 additions & 1 deletion template/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,22 @@ <h1 id='heading'>MolPaintJS</h1>
<div id="debug"></div>
<table>
<tr><th>Editor</th><th></th><th>Viewer</th></tr>
<tr><td><div id="mol"></div></td><td><div style="padding:40px">&nbsp;</div></td><td><div id="viewer" style="padding-top:40px"></div></td></tr>
<tr><td><div id="mol"></div></td><td><div style="padding:40px">&nbsp;</div></td><td><div id="viewer" style="padding-top:40px"></div>
<div style="width:280px">By hovering over the text typed in bold, you can highlight the corresponding regions of the
<span style="font-weight:bold;"
onmouseover='molPaintJS.CollectionHandler("viewer").highlight("all atoms and bonds");'
onmouseout='molPaintJS.CollectionHandler("viewer").highlight("");'>cholecalciferol</span> molecule:
<span style="font-weight:bold;"
onmouseover='molPaintJS.CollectionHandler("viewer").highlight("Ring A");'
onmouseout='molPaintJS.CollectionHandler("viewer").highlight("");'>Ring A</span>,
<span style="font-weight:bold;"
onmouseover='molPaintJS.CollectionHandler("viewer").highlight("Ring C");'
onmouseout='molPaintJS.CollectionHandler("viewer").highlight("");'>Ring C</span> or
<span style="font-weight:bold;"
onmouseover='molPaintJS.CollectionHandler("viewer").highlight("Ring D");'
onmouseout='molPaintJS.CollectionHandler("viewer").highlight("");'>Ring D</span>.
</div>
</td></tr>
</table>
<script type="text/javascript">
molPaintJS.newContext("mol", {helpURL:"help/index.html", iconSize: 32, debugId: "debug"}).init().setMolecule("3-Acetylcoumarin\n MolPaintJS\n\n 14 15 0 0 0 0 0 0 0 0999 V2000\n -2.1434 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -2.1434 -0.8250 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.4289 -1.2375 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.7145 -0.8250 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -0.7145 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n -1.4289 0.4125 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 -1.2375 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 0.7145 -0.8250 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.7145 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 0.0000 0.4125 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.4289 0.4125 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 2.1434 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0\n 1.4289 1.2375 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1.4289 -1.2375 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0\n 1 2 2 0 \n 2 3 1 0 \n 3 4 2 0 \n 4 5 1 0 \n 5 6 2 0 \n 6 1 1 0 \n 4 7 1 0 \n 7 8 1 0 \n 8 9 1 0 \n 9 10 2 0 \n 10 5 1 0 \n 9 11 1 0 \n 11 12 1 0 \n 11 13 2 0 \n 8 14 2 0 \nM END\n").setChangeListener(changeListener);
Expand Down

0 comments on commit 848b134

Please sign in to comment.