| |
| |
| |
| |
| |
| (function (global) { |
| function MatterViewer(canvas) { |
| this.c = canvas; this.ctx = canvas.getContext('2d'); |
| this.rot = [[1,0,0],[0,1,0],[0,0,1]]; this.zoom = 1; this.pan = [0,0]; |
| this.data = null; this.frame = null; |
| this.show = {bonds: true, cell: true, labels: false, forces: false}; |
| var self = this, drag = null; |
| canvas.addEventListener('mousedown', function (e) { drag = {x: e.clientX, y: e.clientY, shift: e.shiftKey}; }); |
| window.addEventListener('mouseup', function () { drag = null; }); |
| window.addEventListener('mousemove', function (e) { |
| if (!drag) return; |
| var dx = e.clientX - drag.x, dy = e.clientY - drag.y; drag.x = e.clientX; drag.y = e.clientY; |
| if (drag.shift) { self.pan[0] += dx; self.pan[1] += dy; } |
| else { self.rotate(dy * 0.01, dx * 0.01); } |
| self.draw(); |
| }); |
| canvas.addEventListener('wheel', function (e) { e.preventDefault(); self.zoom *= (e.deltaY < 0 ? 1.1 : 0.9); self.draw(); }, {passive: false}); |
| } |
| function mul(a, b) { var r = [[0,0,0],[0,0,0],[0,0,0]]; for (var i=0;i<3;i++) for (var j=0;j<3;j++) for (var k=0;k<3;k++) r[i][j]+=a[i][k]*b[k][j]; return r; } |
| MatterViewer.prototype.rotate = function (ax, ay) { |
| var cx = Math.cos(ax), sx = Math.sin(ax), cy = Math.cos(ay), sy = Math.sin(ay); |
| var Rx = [[1,0,0],[0,cx,-sx],[0,sx,cx]], Ry = [[cy,0,sy],[0,1,0],[-sy,0,cy]]; |
| this.rot = mul(Ry, mul(Rx, this.rot)); |
| }; |
| MatterViewer.prototype.load = function (data) { |
| this.data = data; this.frame = null; |
| var P = data.atoms.map(function (a) { return a.position; }); |
| var c = [0,0,0]; P.forEach(function (p) { c[0]+=p[0]; c[1]+=p[1]; c[2]+=p[2]; }); |
| this.center = c.map(function (x) { return x / Math.max(1, P.length); }); |
| var r = 1; P.forEach(function (p) { r = Math.max(r, Math.hypot(p[0]-c[0]/P.length, p[1]-c[1]/P.length, p[2]-c[2]/P.length)); }); |
| if (data.cell) r = Math.max(r, 0.6 * Math.hypot.apply(null, data.cell[0].map(function (_, i) { return data.cell[0][i] + data.cell[1][i] + data.cell[2][i]; }))); |
| this.scale = 0.42 * Math.min(this.c.width, this.c.height) / (r + 1.5); |
| this.draw(); |
| }; |
| MatterViewer.prototype.positions = function () { |
| var d = this.data; |
| if (this.frame !== null && d.trajectory) { |
| var f = this.frame, A = d.trajectory[0], B = d.trajectory[1]; |
| return A.map(function (p, i) { return [0,1,2].map(function (k) { return p[k] + f * (B[i][k] - p[k]); }); }); |
| } |
| return d.atoms.map(function (a) { return a.position; }); |
| }; |
| MatterViewer.prototype.project = function (p) { |
| var q = [p[0]-this.center[0], p[1]-this.center[1], p[2]-this.center[2]], R = this.rot; |
| var x = R[0][0]*q[0]+R[0][1]*q[1]+R[0][2]*q[2], y = R[1][0]*q[0]+R[1][1]*q[1]+R[1][2]*q[2], z = R[2][0]*q[0]+R[2][1]*q[1]+R[2][2]*q[2]; |
| var s = this.scale * this.zoom; |
| return [this.c.width/2 + this.pan[0] + x*s, this.c.height/2 + this.pan[1] - y*s, z]; |
| }; |
| MatterViewer.prototype.draw = function () { |
| var ctx = this.ctx, d = this.data, self = this; if (!d) return; |
| ctx.fillStyle = '#10141a'; ctx.fillRect(0, 0, this.c.width, this.c.height); |
| var P = this.positions(), S = P.map(function (p) { return self.project(p); }); |
| if (this.show.cell && d.cell) { |
| var o = [0,0,0], C = d.cell, corners = []; |
| for (var i=0;i<2;i++) for (var j=0;j<2;j++) for (var k=0;k<2;k++) corners.push([0,1,2].map(function (m) { return i*C[0][m]+j*C[1][m]+k*C[2][m]; })); |
| var edges = [[0,1],[0,2],[0,4],[1,3],[1,5],[2,3],[2,6],[3,7],[4,5],[4,6],[5,7],[6,7]]; |
| ctx.strokeStyle = '#5a6b7d'; ctx.lineWidth = 1; ctx.setLineDash([4,3]); |
| edges.forEach(function (e) { var a = self.project(corners[e[0]]), b = self.project(corners[e[1]]); ctx.beginPath(); ctx.moveTo(a[0],a[1]); ctx.lineTo(b[0],b[1]); ctx.stroke(); }); |
| ctx.setLineDash([]); |
| } |
| var items = []; |
| if (this.show.bonds) d.bonds.forEach(function (b) { items.push({z: (S[b.a][2]+S[b.b][2])/2 - 0.01, bond: b}); }); |
| d.atoms.forEach(function (a, i) { items.push({z: S[i][2], atom: i}); }); |
| items.sort(function (u, v) { return u.z - v.z; }); |
| var s = this.scale * this.zoom; |
| items.forEach(function (it) { |
| if (it.bond) { |
| var a = S[it.bond.a], b = S[it.bond.b]; |
| ctx.strokeStyle = 'rgba(200,200,200,' + (0.25 + 0.65 * (it.bond.confidence == null ? 1 : it.bond.confidence)) + ')'; |
| ctx.lineWidth = Math.max(1.5, 0.12 * s); ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0], b[1]); ctx.stroke(); |
| } else { |
| var i = it.atom, at = d.atoms[i], p = S[i], r = Math.max(3, 0.45 * at.radius * s); |
| var g = ctx.createRadialGradient(p[0]-r/3, p[1]-r/3, r/6, p[0], p[1], r); |
| g.addColorStop(0, '#ffffff'); g.addColorStop(0.25, at.color); g.addColorStop(1, '#000000'); |
| ctx.fillStyle = g; ctx.beginPath(); ctx.arc(p[0], p[1], r, 0, 2*Math.PI); ctx.fill(); |
| if (self.show.labels) { ctx.fillStyle = '#e6edf3'; ctx.font = '11px monospace'; ctx.fillText(at.symbol + i, p[0]+r, p[1]-r); } |
| if (self.show.forces && d.overlays && d.overlays.forces) { |
| var f = d.overlays.forces[i], q = self.project([P[i][0]+f[0], P[i][1]+f[1], P[i][2]+f[2]]); |
| ctx.strokeStyle = '#f0b429'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(p[0], p[1]); ctx.lineTo(q[0], q[1]); ctx.stroke(); |
| } |
| } |
| }); |
| ctx.fillStyle = '#9fb0c0'; ctx.font = '12px sans-serif'; |
| ctx.fillText(d.formula + ' | ' + (d.evidence_state ? d.evidence_state.maturity + ' ' + d.evidence_state.label : ''), 10, 18); |
| ctx.fillText('style does not imply validation', 10, this.c.height - 10); |
| }; |
| global.MatterViewer = MatterViewer; |
| })(window); |
|
|
