tandem-front-end
Version:
Visual editor for web components
87 lines • 4.2 kB
JavaScript
;
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var lodash_1 = require("lodash");
var tandem_common_1 = require("tandem-common");
var recompose_1 = require("recompose");
var GrabberAxis;
(function (GrabberAxis) {
GrabberAxis[GrabberAxis["X"] = 1] = "X";
GrabberAxis[GrabberAxis["Y"] = 2] = "Y";
})(GrabberAxis = exports.GrabberAxis || (exports.GrabberAxis = {}));
exports.default = recompose_1.compose(recompose_1.pure, recompose_1.withState("canvas", "setCanvas", null), recompose_1.withState("grabberPoint", "setGrabberPoint", null), recompose_1.withHandlers(function () {
var _canvas;
return {
onCanvas: function (_a) {
var setCanvas = _a.setCanvas, draw = _a.draw;
return function (canvas) {
setCanvas((_canvas = canvas));
if (canvas) {
var _a = canvas.parentElement.getBoundingClientRect(), width = _a.width, height = _a.height;
draw(canvas, width, height);
}
};
},
onMouseDown: function (_a) {
var grabberAxis = _a.grabberAxis, setGrabberPoint = _a.setGrabberPoint, onChange = _a.onChange, onChangeComplete = _a.onChangeComplete;
return function (event) {
var rect = _canvas.getBoundingClientRect();
var handleChange = function (callback) { return function (event) {
var point = {
left: grabberAxis & GrabberAxis.X
? Math.max(0, Math.min(rect.width - 1, event.clientX - rect.left))
: 0,
top: grabberAxis & GrabberAxis.Y
? Math.max(0, Math.min(rect.height - 1, event.clientY - rect.top))
: 0
};
if (callback) {
var imageData = _canvas
.getContext("2d")
.getImageData(point.left, point.top, 1, 1).data;
callback(imageData);
}
setGrabberPoint(point);
}; };
tandem_common_1.startDOMDrag(event, lodash_1.noop, handleChange(onChange), handleChange(onChangeComplete));
};
}
};
}), recompose_1.lifecycle({
componentDidUpdate: function (_a) {
var setGrabberPoint = _a.setGrabberPoint, getGraggerPoint = _a.getGraggerPoint, draw = _a.draw, canvas = _a.canvas, value = _a.value;
if (canvas && this.props.draw !== draw) {
var _b = canvas.parentElement.getBoundingClientRect(), width = _b.width, height = _b.height;
this.props.draw(canvas, width, height);
}
if (canvas && this.props.value !== value) {
var _c = canvas.parentElement.getBoundingClientRect(), width = _c.width, height = _c.height;
setGrabberPoint(getGraggerPoint(this.props.value, width, height));
}
}
}), function (Base) { return function (_a) {
var onMouseDown = _a.onMouseDown, grabberPoint = _a.grabberPoint, onCanvas = _a.onCanvas, rest = __rest(_a, ["onMouseDown", "grabberPoint", "onCanvas"]);
return (React.createElement(Base, __assign({}, rest, { grabberProps: {
style: grabberPoint
}, onMouseDown: onMouseDown, canvasProps: {
ref: onCanvas
} })));
}; });
//# sourceMappingURL=canvas-controller.js.map