@gorpacrate/core-graphics/lib/helpers/shapes.js

A core library for creating shape-based graphic editors

"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var i = require("icepick");
var React = require("react");
var shallowequal = require("shallowequal");
var declarations_1 = require("../declarations");
var editor_events_1 = require("../editor-state/editor-events");
var data_1 = require("../utils/data");
var events_1 = require("../utils/events");
var modes_1 = require("./modes");
var onShapeMouseDown = function (onEditorEvent, id) { return function (e) { return (onEditorEvent(editor_events_1.canvasShapeMouseDown({ button: events_1.getMouseEventButton(e), id: id }))); }; };
var onShapeMouseUp = function (onEditorEvent, id) { return function (e) { return (onEditorEvent(editor_events_1.canvasShapeMouseUp({ button: events_1.getMouseEventButton(e), id: id }))); }; };
function getWrapperProps(props) {
    var mode = props.mode, shapeData = props.shapeData;
    // mode state
    var modeInfo = modes_1.getVerboseModeInfo(mode);
    var selectedShapes = modeInfo.selectedShapes, selectedShapesIds = modeInfo.selectedShapesIds, rubberBandSelectedShapesIds = modeInfo.rubberBandSelectedShapesIds, subSelectedShape = modeInfo.subSelectedShape, subSelectedShapeId = modeInfo.subSelectedShapeId, drawingShape = modeInfo.drawingShape, drawnShapeId = modeInfo.drawnShapeId, transformingShapes = modeInfo.transformingShapes, transformedShapesIds = modeInfo.transformedShapesIds;
    var id = shapeData.id;
    var selected = selectedShapes && data_1.hasInArr(id, selectedShapesIds);
    var onlySelected = selected && selectedShapesIds.length === 1;
    var beingSelectedWithRubberBand = declarations_1.isRubberBandSelectionMode(mode) && data_1.hasInArr(id, rubberBandSelectedShapesIds);
    var subSelected = subSelectedShape && (subSelectedShapeId === id);
    var beingDrawn = drawingShape && (drawnShapeId === id);
    var transformed = transformingShapes && data_1.hasInArr(id, transformedShapesIds);
    return {
        selected: selected,
        onlySelected: onlySelected,
        beingSelectedWithRubberBand: beingSelectedWithRubberBand,
        subSelected: subSelected,
        beingDrawn: beingDrawn,
        transformed: transformed,
        shapeData: shapeData
    };
}
// wraps shape component, providing optimized updates and useful props
function wrapInShapeHelpers(comp) {
    var _a;
    return (_a = /** @class */ (function (_super) {
            tslib_1.__extends(class_1, _super);
            function class_1() {
                return _super !== null && _super.apply(this, arguments) || this;
            }
            class_1.prototype.shouldComponentUpdate = function (nextProps) {
                var wrappedNext = getWrapperProps(nextProps);
                var wrappedCurr = getWrapperProps(this.props);
                return !shallowequal(wrappedNext, wrappedCurr);
            };
            class_1.prototype.render = function () {
                var onEditorEvent = this.props.onEditorEvent;
                var id = this.props.shapeData.id;
                var wrapperProps = getWrapperProps(this.props);
                // shapes events
                var onMouseDown = onShapeMouseDown(onEditorEvent, id);
                var onMouseUp = onShapeMouseUp(onEditorEvent, id);
                var newProps = i.assign(wrapperProps, { onMouseDown: onMouseDown, onMouseUp: onMouseUp, onEditorEvent: onEditorEvent });
                return React.createElement(comp, newProps);
            };
            return class_1;
        }(React.Component)),
        _a.displayName = 'WrappedInShapeHelpers',
        _a);
}
exports.wrapInShapeHelpers = wrapInShapeHelpers;
//# sourceMappingURL=shapes.js.map