@gorpacrate/core-graphics/lib/renderer/resize-handle.js

A core library for creating shape-based graphic editors

"use strict";
exports.__esModule = true;
var tslib_1 = require("tslib");
var React = require("react");
var css_1 = require("../utils/css");
exports.HANDLE_HOVER_ZONE_SIZE = 24;
var ResizeHandle = /** @class */ (function (_super) {
    tslib_1.__extends(ResizeHandle, _super);
    function ResizeHandle() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ResizeHandle.prototype.render = function () {
        var _a = this.props, onMouseUp = _a.onMouseUp, onMouseDown = _a.onMouseDown, onTouchStart = _a.onTouchStart, onTouchEnd = _a.onTouchEnd, x = _a.x, y = _a.y, cursor = _a.cursor;
        var onMouse = { onMouseUp: onMouseUp, onMouseDown: onMouseDown, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd };
        return (React.createElement("g", { style: { cursor: cursor }, className: css_1.cssName('handle'), transform: "translate( " + Math.round(x) + " " + Math.round(y) + " )" },
            React.createElement("style", null, "\n          ." + css_1.cssName('handle') + " ." + css_1.cssName('hoverZone') + " { fill: rgba(0,0,0, 0); }\n          ." + css_1.cssName('handle') + ":hover ." + css_1.cssName('hoverZone') + " { fill: rgba(0,0,0, 0.0); }\n          ." + css_1.cssName('handle') + ":hover ." + css_1.cssName('outerHandleBorder') + " { stroke: #0DDAD5 }\n        "),
            React.createElement("rect", tslib_1.__assign({ className: css_1.cssName('hoverZone'), width: exports.HANDLE_HOVER_ZONE_SIZE, height: exports.HANDLE_HOVER_ZONE_SIZE, stroke: 'none', fill: '#222', x: -exports.HANDLE_HOVER_ZONE_SIZE / 2, y: -exports.HANDLE_HOVER_ZONE_SIZE / 2 }, onMouse)),
            React.createElement("rect", tslib_1.__assign({ className: css_1.cssName('outerHandleBorder'), width: 9, height: 9, x: '-4.5', y: '-4.5', strokeWidth: '1', fill: 'none', stroke: 'transparent' }, onMouse)),
            React.createElement("rect", tslib_1.__assign({ width: 7, height: 7, x: '-3.5', y: '-3.5', stroke: '#fff', strokeWidth: '1', fill: '#0DDAD5' }, onMouse))));
    };
    return ResizeHandle;
}(React.Component));
exports["default"] = ResizeHandle;
//# sourceMappingURL=resize-handle.js.map