tandem-front-end
Version:
Visual editor for web components
52 lines • 2.37 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ReactDOM = require("react-dom");
var DraggableComponent = /** @class */ (function (_super) {
__extends(DraggableComponent, _super);
function DraggableComponent() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.onMouseDown = function (event) {
_this._element = ReactDOM.findDOMNode(_this);
document.body.addEventListener("mouseup", _this.onMouseUp);
document.body.addEventListener("mousemove", _this.onMouseMove);
};
_this.onMouseMove = function (event) {
var element = _this._element;
var prect = element.getBoundingClientRect();
var rx = Math.min(prect.right - prect.left, Math.max(0, event.clientX - prect.left));
var ry = Math.min(prect.bottom - prect.top, Math.max(0, event.clientY - prect.top));
_this.props.onDrag({
px: rx / prect.width,
py: ry / prect.height,
width: prect.width,
height: prect.height
});
};
_this.onMouseUp = function (event) {
document.body.removeEventListener("mouseup", _this.onMouseUp);
document.body.removeEventListener("mousemove", _this.onMouseMove);
if (_this.props.onDragStop) {
_this.props.onDragStop();
}
};
return _this;
}
DraggableComponent.prototype.componentDidMount = function () { };
DraggableComponent.prototype.render = function () {
return React.createElement("span", { onMouseDown: this.onMouseDown }, this.props.children);
};
return DraggableComponent;
}(React.Component));
exports.DraggableComponent = DraggableComponent;
//# sourceMappingURL=index.js.map