@gorpacrate/core-graphics
Version:
A core library for creating shape-based graphic editors
113 lines • 5.32 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var React = require("react");
var declarations_1 = require("../declarations");
var editor_events_1 = require("../editor-state/editor-events");
var arrow_1 = require("../icons/arrow");
var bounding_box_1 = require("../utils/bounding-box");
var css_1 = require("../utils/css");
var math_1 = require("../utils/math");
var ARROW_SIZE = 40;
function getViewportBB(params) {
var viewport = params.viewport, viewportWidth = params.viewportWidth, viewportHeight = params.viewportHeight;
var x = viewport.x, y = viewport.y;
return {
width: viewportWidth,
height: viewportHeight,
x1: x, y1: y,
x2: x + viewportWidth,
y2: y + viewportHeight
};
}
function getArrowPoint(params) {
// get min point
var viewportBB = bounding_box_1.padBBEqual(-ARROW_SIZE / 2, params.viewportBB);
var shapesBBs = params.shapesBBs;
var bbCenters = shapesBBs.map(bounding_box_1.getBBCenter);
var viewportCenter = bounding_box_1.getBBCenter(viewportBB);
return math_1.getClosestPoint(bbCenters, viewportCenter);
}
function getArrowParams(params) {
var viewportBB = bounding_box_1.padBBEqual(-ARROW_SIZE / 2, params.viewportBB);
var viewportCenter = bounding_box_1.getBBCenter(viewportBB);
var minPoint = getArrowPoint(params);
// align arrow
var scx = viewportCenter.x, scy = viewportCenter.y;
var vcx = minPoint.x, vcy = minPoint.y;
var dp = {
x: vcx - scx,
y: vcy - scy
};
var angle = Math.atan2(dp.y, dp.x) * (180 / Math.PI);
var maxX = viewportBB.width / 2;
var maxY = viewportBB.height / 2;
var dpImage = {
x: dp.x / maxX,
y: dp.y / maxY
};
var dpNormalized = math_1.manhattanNormalizeV(dpImage);
var np = {
x: dpNormalized.x * maxX,
y: dpNormalized.y * maxY
};
return {
x: viewportBB.width / 2 + np.x,
y: viewportBB.height / 2 + np.y,
angle: angle
};
}
var HelperArrowRenderer = /** @class */ (function (_super) {
tslib_1.__extends(HelperArrowRenderer, _super);
function HelperArrowRenderer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.navigateToArrow = function () {
var _a = _this.props, viewportWidth = _a.viewportWidth, viewportHeight = _a.viewportHeight, onEditorEvent = _a.onEditorEvent;
var _b = getArrowPoint(_this.getBBs()), x = _b.x, y = _b.y;
var nextViewport = {
x: Math.round(x - viewportWidth / 2),
y: Math.round(y - viewportHeight / 2)
};
onEditorEvent(editor_events_1.setViewport(nextViewport));
};
return _this;
}
HelperArrowRenderer.prototype.getBBs = function () {
var _a = this.props, scene = _a.scene, shapesDeclarations = _a.shapesDeclarations, viewport = _a.viewport, viewportWidth = _a.viewportWidth, viewportHeight = _a.viewportHeight;
var viewportBB = getViewportBB({ viewport: viewport, viewportWidth: viewportWidth, viewportHeight: viewportHeight });
var shapesBBs = bounding_box_1.getShapesBoundingBoxes({
shapesDeclarations: shapesDeclarations,
shapes: scene.shapes,
ids: scene.shapesOrder
}).map(function (indexedBB) { return indexedBB.bb; });
return { viewportBB: viewportBB, shapesBBs: shapesBBs };
};
HelperArrowRenderer.prototype.showArrow = function () {
var _a = this.props, scene = _a.scene, mode = _a.mode;
if (declarations_1.isMovingViewportMode(mode) && scene.shapesOrder.length > 0) {
var _b = this.getBBs(), viewportBB_1 = _b.viewportBB, shapesBBs = _b.shapesBBs;
// TODO optimize
var noShapesVisible = shapesBBs.map(function (bb) { return !bounding_box_1.doBoundingBoxesCollide(bb, viewportBB_1); }).reduce(function (a, b) { return (a && b); }, true);
return noShapesVisible;
}
return false;
};
HelperArrowRenderer.prototype.getArrowParams = function () {
return getArrowParams(this.getBBs());
};
HelperArrowRenderer.prototype.render = function () {
if (!this.showArrow()) {
return null;
}
var _a = this.getArrowParams(), x = _a.x, y = _a.y, angle = _a.angle;
return (React.createElement("g", { transform: "translate(" + (x + ARROW_SIZE / 2) + ", " + (y + ARROW_SIZE / 2) + ")" },
React.createElement("style", null, "\n ." + css_1.cssName('arrow') + " path{ fill: #aaa; }\n ." + css_1.cssName('arrow') + ":hover path{ fill: #666; }\n "),
React.createElement("g", { className: css_1.cssName('arrow') },
React.createElement("g", { transform: "rotate(" + (angle + 90) + " 0 0) translate(-8 -8)" },
React.createElement(arrow_1["default"], null)),
React.createElement("rect", { onClick: this.navigateToArrow, style: { cursor: 'pointer!important' }, x: -ARROW_SIZE / 2, y: -ARROW_SIZE / 2, height: ARROW_SIZE, width: ARROW_SIZE, fill: 'transparent' }))));
};
return HelperArrowRenderer;
}(React.Component));
exports["default"] = HelperArrowRenderer;
//# sourceMappingURL=helper-arrow-renderer.js.map