molstar
Version:
A comprehensive macromolecular library.
311 lines • 14.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LineGraphComponent = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
/**
* Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
*
* @author Paul Luna <paulluna0215@gmail.com>
*/
var point_component_1 = require("./point-component");
var React = (0, tslib_1.__importStar)(require("react"));
var linear_algebra_1 = require("../../../mol-math/linear-algebra");
var LineGraphComponent = /** @class */ (function (_super) {
(0, tslib_1.__extends)(LineGraphComponent, _super);
function LineGraphComponent(props) {
var _this = _super.call(this, props) || this;
_this.handleKeyDown = function (event) {
// TODO: set canSelectMultiple = true
};
_this.handleKeyUp = function (event) {
// TODO: SET canSelectMultiple = fasle
};
_this.handleClick = function (id) { return function (event) {
// TODO: add point to selected array
}; };
_this.handleMouseDown = function (id) { return function (event) {
if (id === 0 || id === _this.state.points.length - 1) {
return;
}
if (_this.state.canSelectMultiple) {
return;
}
var copyPoint = _this.normalizePoint(linear_algebra_1.Vec2.create(_this.state.points[id][0], _this.state.points[id][1]));
_this.ghostPoints.push(document.createElementNS(_this.namespace, 'circle'));
_this.ghostPoints[0].setAttribute('r', '10');
_this.ghostPoints[0].setAttribute('fill', 'orange');
_this.ghostPoints[0].setAttribute('cx', "" + copyPoint[0]);
_this.ghostPoints[0].setAttribute('cy', "" + copyPoint[1]);
_this.ghostPoints[0].setAttribute('style', 'display: none');
_this.gElement.appendChild(_this.ghostPoints[0]);
_this.updatedX = copyPoint[0];
_this.updatedY = copyPoint[1];
_this.selected = [id];
}; };
_this.deletePoint = function (i) { return function (event) {
if (i === 0 || i === _this.state.points.length - 1) {
return;
}
var points = _this.state.points.filter(function (_, j) { return j !== i; });
points.sort(function (a, b) {
if (a[0] === b[0]) {
if (a[0] === 0) {
return a[1] - b[1];
}
if (a[1] === 1) {
return b[1] - a[1];
}
return a[1] - b[1];
}
return a[0] - b[0];
});
_this.setState({ points: points });
_this.change(points);
event.stopPropagation();
}; };
_this.myRef = React.createRef();
_this.state = {
points: [
linear_algebra_1.Vec2.create(0, 0),
linear_algebra_1.Vec2.create(1, 0)
],
copyPoint: undefined,
canSelectMultiple: false,
};
_this.height = 400;
_this.width = 600;
_this.padding = 70;
_this.selected = undefined;
_this.ghostPoints = [];
_this.namespace = 'http://www.w3.org/2000/svg';
for (var _i = 0, _a = _this.props.data; _i < _a.length; _i++) {
var point = _a[_i];
_this.state.points.push(point);
}
_this.state.points.sort(function (a, b) {
if (a[0] === b[0]) {
if (a[0] === 0) {
return a[1] - b[1];
}
if (a[1] === 1) {
return b[1] - a[1];
}
return a[1] - b[1];
}
return a[0] - b[0];
});
_this.handleDrag = _this.handleDrag.bind(_this);
_this.handleMultipleDrag = _this.handleMultipleDrag.bind(_this);
_this.handleDoubleClick = _this.handleDoubleClick.bind(_this);
_this.refCallBack = _this.refCallBack.bind(_this);
_this.handlePointUpdate = _this.handlePointUpdate.bind(_this);
_this.change = _this.change.bind(_this);
_this.handleKeyUp = _this.handleKeyUp.bind(_this);
_this.handleLeave = _this.handleLeave.bind(_this);
_this.handleEnter = _this.handleEnter.bind(_this);
return _this;
}
LineGraphComponent.prototype.render = function () {
var points = this.renderPoints();
var lines = this.renderLines();
return ([
(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("svg", (0, tslib_1.__assign)({ className: "msp-canvas", ref: this.refCallBack, viewBox: "0 0 " + (this.width + this.padding) + " " + (this.height + this.padding), onMouseMove: this.handleDrag, onMouseUp: this.handlePointUpdate, onMouseLeave: this.handleLeave, onMouseEnter: this.handleEnter, tabIndex: 0, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, onDoubleClick: this.handleDoubleClick }, { children: [(0, jsx_runtime_1.jsxs)("g", (0, tslib_1.__assign)({ stroke: "black", fill: "black" }, { children: [lines, points] }), void 0), (0, jsx_runtime_1.jsx)("g", { className: "ghost-points", stroke: "black", fill: "black" }, void 0)] }), void 0) }, "LineGraph"),
(0, jsx_runtime_1.jsx)("div", { id: "modal-root" }, "modal")
]);
};
LineGraphComponent.prototype.componentDidMount = function () {
this.gElement = document.getElementsByClassName('ghost-points')[0];
};
LineGraphComponent.prototype.change = function (points) {
var copyPoints = points.slice();
copyPoints.shift();
copyPoints.pop();
this.props.onChange(copyPoints);
};
LineGraphComponent.prototype.handleDrag = function (event) {
if (this.selected === undefined) {
return;
}
var pt = this.myRef.createSVGPoint();
var updatedCopyPoint;
var padding = this.padding / 2;
pt.x = event.clientX;
pt.y = event.clientY;
var svgP = pt.matrixTransform(this.myRef.getScreenCTM().inverse());
updatedCopyPoint = linear_algebra_1.Vec2.create(svgP.x, svgP.y);
if ((svgP.x < (padding) || svgP.x > (this.width + (padding))) && (svgP.y > (this.height + (padding)) || svgP.y < (padding))) {
updatedCopyPoint = linear_algebra_1.Vec2.create(this.updatedX, this.updatedY);
}
else if (svgP.x < padding) {
updatedCopyPoint = linear_algebra_1.Vec2.create(padding, svgP.y);
}
else if (svgP.x > (this.width + (padding))) {
updatedCopyPoint = linear_algebra_1.Vec2.create(this.width + padding, svgP.y);
}
else if (svgP.y > (this.height + (padding))) {
updatedCopyPoint = linear_algebra_1.Vec2.create(svgP.x, this.height + padding);
}
else if (svgP.y < (padding)) {
updatedCopyPoint = linear_algebra_1.Vec2.create(svgP.x, padding);
}
else {
updatedCopyPoint = linear_algebra_1.Vec2.create(svgP.x, svgP.y);
}
this.updatedX = updatedCopyPoint[0];
this.updatedY = updatedCopyPoint[1];
var unNormalizePoint = this.unNormalizePoint(updatedCopyPoint);
this.ghostPoints[0].setAttribute('style', 'display: visible');
this.ghostPoints[0].setAttribute('cx', "" + updatedCopyPoint[0]);
this.ghostPoints[0].setAttribute('cy', "" + updatedCopyPoint[1]);
this.props.onDrag(unNormalizePoint);
};
LineGraphComponent.prototype.handleMultipleDrag = function () {
// TODO
};
LineGraphComponent.prototype.handlePointUpdate = function (event) {
var selected = this.selected;
if (this.state.canSelectMultiple) {
return;
}
if (selected === undefined || selected[0] === 0 || selected[0] === this.state.points.length - 1) {
this.setState({
copyPoint: undefined,
});
return;
}
this.selected = undefined;
var updatedPoint = this.unNormalizePoint(linear_algebra_1.Vec2.create(this.updatedX, this.updatedY));
var points = this.state.points.filter(function (_, i) { return i !== selected[0]; });
points.push(updatedPoint);
points.sort(function (a, b) {
if (a[0] === b[0]) {
if (a[0] === 0) {
return a[1] - b[1];
}
if (a[1] === 1) {
return b[1] - a[1];
}
return a[1] - b[1];
}
return a[0] - b[0];
});
this.setState({
points: points,
});
this.change(points);
this.gElement.innerHTML = '';
this.ghostPoints = [];
document.removeEventListener('mousemove', this.handleDrag, true);
document.removeEventListener('mouseup', this.handlePointUpdate, true);
};
LineGraphComponent.prototype.handleDoubleClick = function (event) {
var pt = this.myRef.createSVGPoint();
pt.x = event.clientX;
pt.y = event.clientY;
var svgP = pt.matrixTransform(this.myRef.getScreenCTM().inverse());
var points = this.state.points;
var padding = this.padding / 2;
if (svgP.x < (padding) ||
svgP.x > (this.width + (padding)) ||
svgP.y > (this.height + (padding)) ||
svgP.y < (this.padding / 2)) {
return;
}
var newPoint = this.unNormalizePoint(linear_algebra_1.Vec2.create(svgP.x, svgP.y));
points.push(newPoint);
points.sort(function (a, b) {
if (a[0] === b[0]) {
if (a[0] === 0) {
return a[1] - b[1];
}
if (a[1] === 1) {
return b[1] - a[1];
}
return a[1] - b[1];
}
return a[0] - b[0];
});
this.setState({ points: points });
this.change(points);
};
LineGraphComponent.prototype.handleLeave = function () {
if (this.selected === undefined) {
return;
}
document.addEventListener('mousemove', this.handleDrag, true);
document.addEventListener('mouseup', this.handlePointUpdate, true);
};
LineGraphComponent.prototype.handleEnter = function () {
document.removeEventListener('mousemove', this.handleDrag, true);
document.removeEventListener('mouseup', this.handlePointUpdate, true);
};
LineGraphComponent.prototype.normalizePoint = function (point) {
var min = this.padding / 2;
var maxX = this.width + min;
var maxY = this.height + min;
var normalizedX = (point[0] * (maxX - min)) + min;
var normalizedY = (point[1] * (maxY - min)) + min;
var reverseY = (this.height + this.padding) - normalizedY;
var newPoint = linear_algebra_1.Vec2.create(normalizedX, reverseY);
return newPoint;
};
LineGraphComponent.prototype.unNormalizePoint = function (point) {
var min = this.padding / 2;
var maxX = this.width + min;
var maxY = this.height + min;
var unNormalizedX = (point[0] - min) / (maxX - min);
// we have to take into account that we reversed y when we first normalized it.
var unNormalizedY = ((this.height + this.padding) - point[1] - min) / (maxY - min);
return linear_algebra_1.Vec2.create(unNormalizedX, unNormalizedY);
};
LineGraphComponent.prototype.refCallBack = function (element) {
if (element) {
this.myRef = element;
}
};
LineGraphComponent.prototype.renderPoints = function () {
var points = [];
var point;
for (var i = 0; i < this.state.points.length; i++) {
if (i !== 0 && i !== this.state.points.length - 1) {
point = this.normalizePoint(this.state.points[i]);
points.push((0, jsx_runtime_1.jsx)(point_component_1.PointComponent, { id: i, x: point[0], y: point[1], nX: this.state.points[i][0], nY: this.state.points[i][1], selected: false, delete: this.deletePoint, onmouseover: this.props.onHover, onmousedown: this.handleMouseDown(i), onclick: this.handleClick(i) }, i));
}
}
return points;
};
LineGraphComponent.prototype.renderLines = function () {
var points = [];
var lines = [];
var min;
var maxX;
var maxY;
var normalizedX;
var normalizedY;
var reverseY;
for (var _i = 0, _a = this.state.points; _i < _a.length; _i++) {
var point = _a[_i];
min = this.padding / 2;
maxX = this.width + min;
maxY = this.height + min;
normalizedX = (point[0] * (maxX - min)) + min;
normalizedY = (point[1] * (maxY - min)) + min;
reverseY = this.height + this.padding - normalizedY;
points.push(linear_algebra_1.Vec2.create(normalizedX, reverseY));
}
var data = points;
var size = data.length;
for (var i = 0; i < size - 1; i++) {
var x1 = data[i][0];
var y1 = data[i][1];
var x2 = data[i + 1][0];
var y2 = data[i + 1][1];
lines.push((0, jsx_runtime_1.jsx)("line", { x1: x1, x2: x2, y1: y1, y2: y2, stroke: "#cec9ba", strokeWidth: "5" }, "lineOf" + i));
}
return lines;
};
return LineGraphComponent;
}(React.Component));
exports.LineGraphComponent = LineGraphComponent;
//# sourceMappingURL=line-graph-component.js.map