@gorpacrate/core-graphics
Version:
A core library for creating shape-based graphic editors
83 lines • 4.49 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 modes_1 = require("../helpers/modes");
var bounding_box_1 = require("../utils/bounding-box");
var events_1 = require("../utils/events");
var resize_handle_1 = require("./resize-handle");
var HANDLES_OFFSET = 3;
var SceneResizeHandles = /** @class */ (function (_super) {
tslib_1.__extends(SceneResizeHandles, _super);
function SceneResizeHandles() {
return _super !== null && _super.apply(this, arguments) || this;
}
SceneResizeHandles.prototype.getBB = function () {
var _a = this.props, mode = _a.mode, shapesDeclarations = _a.shapesDeclarations, scene = _a.scene;
return bounding_box_1.getSelectedOrTransformedShapesBoundingBox({ mode: mode, shapesDeclarations: shapesDeclarations, scene: scene });
};
SceneResizeHandles.prototype.getHandles = function () {
var mode = this.props.mode;
if (modes_1.hasSelectedShapes(mode) && (modes_1.getSelectedShapesIds(mode).length === 1)) {
var _a = this.props, shapesDeclarations = _a.shapesDeclarations, scene = _a.scene;
var id = modes_1.getSelectedShapesIds(mode)[0];
var shapeType = scene.shapes[id].type;
var declaration = shapesDeclarations[shapeType];
return ((declaration && declaration.resizeHandles) || declarations_1.DEFAULT_RESIZE_HANDLES);
}
return declarations_1.DEFAULT_RESIZE_HANDLES;
};
SceneResizeHandles.prototype.getResizeHandlesCoords = function () {
var bb = this.getBB();
var handles = this.getHandles();
return bounding_box_1.getShapesResizeHandlesCoords({ bb: bb, offset: HANDLES_OFFSET, handles: handles });
};
SceneResizeHandles.prototype.handleResizeHandleMouseDown = function (e, handle) {
e.preventDefault();
var button = events_1.getMouseEventButton(e);
var ev = editor_events_1.canvasShapeResizeHandleMouseDown({ handle: handle, button: button });
this.props.onEditorEvent(ev);
};
SceneResizeHandles.prototype.handleResizeHandleMouseUp = function (e, handle) {
e.preventDefault();
var button = events_1.getMouseEventButton(e);
var ev = editor_events_1.canvasShapeResizeHandleMouseUp({ handle: handle, button: button });
this.props.onEditorEvent(ev);
};
SceneResizeHandles.prototype.handleResizeHandleTouchStart = function (e, handle) {
e.preventDefault();
var button = events_1.getTouchEventButton();
var ev = editor_events_1.canvasShapeResizeHandleMouseDown({ handle: handle, button: button });
this.props.onEditorEvent(ev);
};
SceneResizeHandles.prototype.handleResizeHandleTouchEnd = function (e, handle) {
e.preventDefault();
var button = events_1.getTouchEventButton();
var ev = editor_events_1.canvasShapeResizeHandleMouseUp({ handle: handle, button: button });
this.props.onEditorEvent(ev);
};
SceneResizeHandles.prototype.render = function () {
var _this = this;
var mode = this.props.mode;
if (!declarations_1.isSelectedMode(mode) && !declarations_1.isResizingMode(mode)) {
return null;
}
else {
return (React.createElement("g", null, this.getResizeHandlesCoords().map(function (wrappedHandle, index) {
var x = wrappedHandle.x, y = wrappedHandle.y, handle = wrappedHandle.handle;
var cursor = handle.cursor;
// TODO: cached bind
var onMouseDown = function (e) { return _this.handleResizeHandleMouseDown(e, handle); };
var onMouseUp = function (e) { return _this.handleResizeHandleMouseUp(e, handle); };
var onTouchStart = function (e) { return _this.handleResizeHandleTouchStart(e, handle); };
var onTouchEnd = function (e) { return _this.handleResizeHandleTouchEnd(e, handle); };
return (React.createElement(resize_handle_1["default"], { key: index, x: x, y: y, cursor: cursor, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd }));
})));
}
};
return SceneResizeHandles;
}(React.Component));
exports["default"] = SceneResizeHandles;
//# sourceMappingURL=scene-resize-handles.js.map