@gorpacrate/core-graphics
Version:
A core library for creating shape-based graphic editors
121 lines • 6.21 kB
JavaScript
"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var _a;
var React = require("react");
var input_1 = require("../editor-state/events/input");
var shapes_1 = require("../helpers/shapes");
exports.LINE = 'LINE';
exports.RECT = 'RECT';
exports.getRectBoundingBox = function (shapeData) {
var keyPoints = shapeData.keyPoints;
var _a = keyPoints[0], x1 = _a.x, y1 = _a.y;
var _b = keyPoints[1], x2 = _b.x, y2 = _b.y;
var width = Math.abs(x1 - x2);
var height = Math.abs(y1 - y2);
return {
x1: x1, y1: y1, x2: x2, y2: y2,
width: width, height: height
};
};
function draw2Points(_a) {
var mouseCoords, event_1, _b, x, y, _c, endX, endY;
var startX = _a.startX, startY = _a.startY;
return tslib_1.__generator(this, function (_d) {
switch (_d.label) {
case 0:
mouseCoords = { x: startX, y: startY };
_d.label = 1;
case 1:
if (!true) return [3 /*break*/, 3];
return [4 /*yield*/, [{ x: startX, y: startY }, { x: mouseCoords.x, y: mouseCoords.y }]];
case 2:
event_1 = _d.sent();
if (input_1.isMouseMoveEvent(event_1)) {
_b = event_1.payload, x = _b.x, y = _b.y;
mouseCoords.x = x;
mouseCoords.y = y;
}
if (input_1.isMouseUpEvent(event_1)) {
_c = event_1.payload, endX = _c.x, endY = _c.y;
return [2 /*return*/, [{ x: startX, y: startY }, { x: endX, y: endY }]];
}
return [3 /*break*/, 1];
case 3: return [2 /*return*/];
}
});
}
exports.draw2Points = draw2Points;
var LineRenderer = /** @class */ (function (_super) {
tslib_1.__extends(LineRenderer, _super);
function LineRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
LineRenderer.prototype.render = function () {
var _a = this.props, shapeData = _a.shapeData, selected = _a.selected, beingSelectedWithRubberBand = _a.beingSelectedWithRubberBand, transformed = _a.transformed, onMouseDown = _a.onMouseDown, onMouseUp = _a.onMouseUp;
// const { graphicalContextData } = shapeData;
var cursor = 'pointer';
var keyPoints = shapeData.keyPoints;
var _b = keyPoints[0], x1 = _b.x, y1 = _b.y;
var _c = keyPoints[1], x2 = _c.x, y2 = _c.y;
// const strokeColor = graphicalContextData[STROKE_COLOR] || '#000';
var strokeColor = '#000';
return (React.createElement("g", null,
React.createElement("line", tslib_1.__assign({ style: { cursor: cursor } }, { onMouseDown: onMouseDown, onMouseUp: onMouseUp }, { x1: x1, y1: y1, x2: x2, y2: y2 }, { stroke: 'transparent', strokeWidth: '40' })),
(selected || transformed || beingSelectedWithRubberBand) && (React.createElement("line", tslib_1.__assign({ style: { cursor: cursor } }, { onMouseDown: onMouseDown, onMouseUp: onMouseUp }, { x1: x1, y1: y1, x2: x2, y2: y2 }, { stroke: 'rgba(0, 160, 200, 0.3)', strokeWidth: '8' }))),
React.createElement("line", tslib_1.__assign({ style: { cursor: cursor } }, { onMouseDown: onMouseDown, onMouseUp: onMouseUp }, { x1: x1, y1: y1, x2: x2, y2: y2 }, { stroke: strokeColor, strokeWidth: '2' }))));
};
return LineRenderer;
}(React.Component));
var RectRenderer = /** @class */ (function (_super) {
tslib_1.__extends(RectRenderer, _super);
function RectRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
RectRenderer.prototype.render = function () {
var _a = this.props, shapeData = _a.shapeData, selected = _a.selected, beingSelectedWithRubberBand = _a.beingSelectedWithRubberBand, transformed = _a.transformed, onMouseUp = _a.onMouseUp, onMouseDown = _a.onMouseDown;
// const { graphicalContextData } = shapeData;
var cursor = 'pointer';
var keyPoints = shapeData.keyPoints;
var _b = keyPoints[0], x1 = _b.x, y1 = _b.y;
var _c = keyPoints[1], x2 = _c.x, y2 = _c.y;
var x = Math.min(x1, x2);
var y = Math.min(y1, y2);
var width = Math.abs(x2 - x1);
var height = Math.abs(y2 - y1);
// const strokeColor = graphicalContextData[STROKE_COLOR] || '#000';
var strokeColor = '#000';
return (React.createElement("g", null,
React.createElement("rect", tslib_1.__assign({ style: { cursor: cursor } }, { onMouseDown: onMouseDown, onMouseUp: onMouseUp }, { x: x, y: y, width: width, height: height }, { stroke: 'transparent', strokeWidth: '40' })),
(selected || transformed || beingSelectedWithRubberBand) && (React.createElement("rect", tslib_1.__assign({ style: { cursor: cursor } }, { onMouseDown: onMouseDown, onMouseUp: onMouseUp }, { x: x, y: y, width: width, height: height }, { stroke: 'rgba(0, 160, 200, 0.3)', strokeWidth: '8' }))),
React.createElement("rect", tslib_1.__assign({ style: { cursor: cursor } }, { onMouseDown: onMouseDown, onMouseUp: onMouseUp }, { x: x, y: y, width: width, height: height }, { stroke: strokeColor, strokeWidth: '2', fill: '#fff' }))));
};
return RectRenderer;
}(React.Component));
exports.LINE_DECLARATION = {
type: exports.LINE,
displayName: 'Line',
draw: draw2Points,
graphicalContextParams: [],
// drawingModeCanvasCursor: 'crosshair', // base64Cursor(CROSS_CURSOR, 8, 8),
minResizeWidth: 0,
minResizeHeight: 0,
RenderComponent: shapes_1.wrapInShapeHelpers(LineRenderer),
getBoundingBox: exports.getRectBoundingBox
};
exports.RECT_DECLARATION = {
type: exports.RECT,
displayName: 'Rectangle',
draw: draw2Points,
graphicalContextParams: [],
// drawingModeCanvasCursor: 'crosshair',
minResizeWidth: 0,
minResizeHeight: 0,
RenderComponent: shapes_1.wrapInShapeHelpers(RectRenderer),
getBoundingBox: exports.getRectBoundingBox
};
exports.SHAPES_DECLARATIONS = (_a = {},
_a[exports.LINE] = exports.LINE_DECLARATION,
_a[exports.RECT] = exports.RECT_DECLARATION,
_a);
//# sourceMappingURL=example-shapes.js.map