core-graphics/lib/contrib/example-shapes.js

A core library for creating shape-based graphic editors

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.SHAPES_DECLARATIONS = exports.RECT_DECLARATION = exports.LINE_DECLARATION = exports.DRAW_2_POINTS = exports.getRectBoundingBox = exports.RECT = exports.LINE = undefined;

var _SHAPES_DECLARATIONS;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _editorEvents = require('../editor-state/editor-events');

var _shapes = require('../helpers/shapes');

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var LINE = exports.LINE = 'LINE';
var RECT = exports.RECT = 'RECT';
var getRectBoundingBox = exports.getRectBoundingBox = function getRectBoundingBox(shapeData) {
    var keyPoints = shapeData.keyPoints;
    var _keyPoints$ = keyPoints[0];
    var x1 = _keyPoints$.x;
    var y1 = _keyPoints$.y;
    var _keyPoints$2 = keyPoints[1];
    var x2 = _keyPoints$2.x;
    var y2 = _keyPoints$2.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
    };
};
var DRAW_2_POINTS = exports.DRAW_2_POINTS = regeneratorRuntime.mark(function DRAW_2_POINTS(_ref) {
    var startX = _ref.startX;
    var startY = _ref.startY;

    var mouseCoords, event, _event$payload, x, y, _event$payload2, endX, endY;

    return regeneratorRuntime.wrap(function DRAW_2_POINTS$(_context) {
        while (1) {
            switch (_context.prev = _context.next) {
                case 0:
                    mouseCoords = { x: startX, y: startY };

                case 1:
                    if (!true) {
                        _context.next = 13;
                        break;
                    }

                    _context.next = 4;
                    return [{ x: startX, y: startY }, { x: mouseCoords.x, y: mouseCoords.y }];

                case 4:
                    event = _context.sent;

                    if ((0, _editorEvents.isMouseMoveEvent)(event)) {
                        _event$payload = event.payload;
                        x = _event$payload.x;
                        y = _event$payload.y;

                        mouseCoords.x = x;
                        mouseCoords.y = y;
                    }

                    if (!(0, _editorEvents.isMouseUpEvent)(event)) {
                        _context.next = 11;
                        break;
                    }

                    _event$payload2 = event.payload;
                    endX = _event$payload2.x;
                    endY = _event$payload2.y;
                    return _context.abrupt('return', [{ x: startX, y: startY }, { x: endX, y: endY }]);

                case 11:
                    _context.next = 1;
                    break;

                case 13:
                case 'end':
                    return _context.stop();
            }
        }
    }, DRAW_2_POINTS, this);
});

var LineRenderer = function (_React$Component) {
    _inherits(LineRenderer, _React$Component);

    function LineRenderer() {
        _classCallCheck(this, LineRenderer);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(LineRenderer).apply(this, arguments));
    }

    _createClass(LineRenderer, [{
        key: 'render',
        value: function render() {
            var _props = this.props;
            var shapeData = _props.shapeData;
            var selected = _props.selected;
            var beingSelectedWithRubberBand = _props.beingSelectedWithRubberBand;
            var transformed = _props.transformed;
            var onMouseDown = _props.onMouseDown;
            var onMouseUp = _props.onMouseUp;
            // const { graphicalContextData } = shapeData;

            var cursor = 'pointer';
            var keyPoints = shapeData.keyPoints;
            var _keyPoints$3 = keyPoints[0];
            var x1 = _keyPoints$3.x;
            var y1 = _keyPoints$3.y;
            var _keyPoints$4 = keyPoints[1];
            var x2 = _keyPoints$4.x;
            var y2 = _keyPoints$4.y;
            // const strokeColor = graphicalContextData[STROKE_COLOR] || '#000';

            var strokeColor = '#000';
            return React.createElement(
                'g',
                null,
                React.createElement('line', _extends({ 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', _extends({ 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', _extends({ 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 = function (_React$Component2) {
    _inherits(RectRenderer, _React$Component2);

    function RectRenderer() {
        _classCallCheck(this, RectRenderer);

        return _possibleConstructorReturn(this, Object.getPrototypeOf(RectRenderer).apply(this, arguments));
    }

    _createClass(RectRenderer, [{
        key: 'render',
        value: function render() {
            var _props2 = this.props;
            var shapeData = _props2.shapeData;
            var selected = _props2.selected;
            var beingSelectedWithRubberBand = _props2.beingSelectedWithRubberBand;
            var transformed = _props2.transformed;
            var onMouseUp = _props2.onMouseUp;
            var onMouseDown = _props2.onMouseDown;
            // const { graphicalContextData } = shapeData;

            var cursor = 'pointer';
            var keyPoints = shapeData.keyPoints;
            var _keyPoints$5 = keyPoints[0];
            var x1 = _keyPoints$5.x;
            var y1 = _keyPoints$5.y;
            var _keyPoints$6 = keyPoints[1];
            var x2 = _keyPoints$6.x;
            var y2 = _keyPoints$6.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', _extends({ 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', _extends({ 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', _extends({ 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);

var LINE_DECLARATION = exports.LINE_DECLARATION = {
    type: LINE,
    displayName: 'Line',
    draw: DRAW_2_POINTS,
    graphicalContextParams: [],
    // drawingModeCanvasCursor: 'crosshair', // base64Cursor(CROSS_CURSOR, 8, 8),
    minResizeWidth: 0,
    minResizeHeight: 0,
    RenderComponent: (0, _shapes.wrapInShapeHelpers)(LineRenderer),
    getBoundingBox: getRectBoundingBox
};
var RECT_DECLARATION = exports.RECT_DECLARATION = {
    type: RECT,
    displayName: 'Rectangle',
    draw: DRAW_2_POINTS,
    graphicalContextParams: [],
    // drawingModeCanvasCursor: 'crosshair',
    minResizeWidth: 0,
    minResizeHeight: 0,
    RenderComponent: (0, _shapes.wrapInShapeHelpers)(RectRenderer),
    getBoundingBox: getRectBoundingBox
};
var SHAPES_DECLARATIONS = exports.SHAPES_DECLARATIONS = (_SHAPES_DECLARATIONS = {}, _defineProperty(_SHAPES_DECLARATIONS, LINE, LINE_DECLARATION), _defineProperty(_SHAPES_DECLARATIONS, RECT, RECT_DECLARATION), _SHAPES_DECLARATIONS);