core-graphics
Version:
A core library for creating shape-based graphic editors
261 lines (209 loc) • 13.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
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 _mousetrap = require('mousetrap');
var Mousetrap = _interopRequireWildcard(_mousetrap);
var _editorEvents = require('../editor-state/editor-events');
var _events = require('../utils/events');
var _gridDefs = require('./grid-defs');
var _gridDefs2 = _interopRequireDefault(_gridDefs);
var _shapesRenderer = require('./shapes-renderer');
var _shapesRenderer2 = _interopRequireDefault(_shapesRenderer);
var _rubberBand = require('./rubber-band');
var _rubberBand2 = _interopRequireDefault(_rubberBand);
var _sceneResizeHandles = require('./scene-resize-handles');
var _sceneResizeHandles2 = _interopRequireDefault(_sceneResizeHandles);
var _boundingBox = require('./bounding-box');
var _contextMenu = require('./context-menu');
var _contextMenu2 = _interopRequireDefault(_contextMenu);
var _editorState = require('../helpers/editor-state');
var _pointerRenderer = require('./pointer-renderer');
var _pointerRenderer2 = _interopRequireDefault(_pointerRenderer);
var _helperArrowRenderer = require('./helper-arrow-renderer');
var _helperArrowRenderer2 = _interopRequireDefault(_helperArrowRenderer);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 _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; }
// import raf from 'raf';
var MODIFIER_KEYS_MAP = [['ctrl', _editorEvents.SceneModifierKey.Ctrl], ['shift', _editorEvents.SceneModifierKey.Shift], ['alt', _editorEvents.SceneModifierKey.Alt], ['shift+alt', _editorEvents.SceneModifierKey.Alt], ['ctrl+shift', _editorEvents.SceneModifierKey.Shift], ['shift+ctrl', _editorEvents.SceneModifierKey.Ctrl]];
var EV_AND_SCENE_MOD_KEYS = [{ getKey: function getKey(e) {
return e.altKey;
}, sceneKey: _editorEvents.SceneModifierKey.Alt }, { getKey: function getKey(e) {
return e.ctrlKey;
}, sceneKey: _editorEvents.SceneModifierKey.Ctrl }, { getKey: function getKey(e) {
return e.shiftKey;
}, sceneKey: _editorEvents.SceneModifierKey.Shift }];
var Renderer = function (_React$Component) {
_inherits(Renderer, _React$Component);
function Renderer() {
_classCallCheck(this, Renderer);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Renderer).apply(this, arguments));
}
_createClass(Renderer, [{
key: 'getBoundingRect',
value: function getBoundingRect() {
/* tslint:disable:no-string-literal */
var node = this.refs['rendererCanvas'];
/* tslint:enable */
if (!node) {
return {
left: 0,
right: 0,
top: 0,
bottom: 0,
width: 0,
height: 0
};
}
var _props$editorState$vi = this.props.editorState.viewport;
var vx = _props$editorState$vi.x;
var vy = _props$editorState$vi.y;
var rect = node.getBoundingClientRect();
return {
left: rect.left - vx,
right: rect.right - vx,
top: rect.top - vy,
bottom: rect.bottom - vy,
width: rect.width,
height: rect.height
};
}
// binding mod keys with mouseTrap
}, {
key: 'componentDidMount',
value: function componentDidMount() {
var onEditorEvent = this.props.onEditorEvent;
MODIFIER_KEYS_MAP.forEach(function (key) {
var _key = _slicedToArray(key, 2);
var keySym = _key[0];
var keyType = _key[1];
Mousetrap.bind(keySym, function () {
return onEditorEvent((0, _editorEvents.canvasModifierKeyDown)(keyType));
});
Mousetrap.bind(keySym, function () {
return onEditorEvent((0, _editorEvents.canvasModifierKeyUp)(keyType));
}, 'keyup');
});
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
MODIFIER_KEYS_MAP.forEach(function (key) {
var _key2 = _slicedToArray(key, 1);
var keySym = _key2[0];
Mousetrap.unbind(keySym);
Mousetrap.unbind(keySym, 'keyup');
});
}
// check keys on all events, update when changed
}, {
key: 'checkEvKey',
value: function checkEvKey(e) {
var onEditorEvent = this.props.onEditorEvent;
var modifierKeys = this.props.editorState.modifierKeys;
EV_AND_SCENE_MOD_KEYS.forEach(function (decl) {
var getKey = decl.getKey;
var sceneKey = decl.sceneKey;
var evKey = getKey(e);
if (!!evKey !== !!modifierKeys[sceneKey]) {
return evKey ? onEditorEvent((0, _editorEvents.canvasModifierKeyDown)(sceneKey)) : onEditorEvent((0, _editorEvents.canvasModifierKeyUp)(sceneKey));
}
});
}
}, {
key: 'castMouseEvent',
value: function castMouseEvent(e) {
return (0, _events.getMouseEventParams)(this.getBoundingRect(), e);
}
}, {
key: 'castMouseButtonedEvent',
value: function castMouseButtonedEvent(e) {
return (0, _events.getMouseButtonedEventParams)(this.getBoundingRect(), e);
}
}, {
key: 'castMouseButtonEvent',
value: function castMouseButtonEvent(e) {
return (0, _events.getMouseEventButton)(e);
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
var _props = this.props;
var onEditorEvent = _props.onEditorEvent;
var contextMenuRenderer = _props.contextMenuRenderer;
var _props$editorState = this.props.editorState;
var mouse = _props$editorState.mouse;
var mode = _props$editorState.mode;
var scene = _props$editorState.scene;
var shapesDeclarations = _props$editorState.shapesDeclarations;
var contextMenu = _props$editorState.contextMenu;
var grid = _props$editorState.grid;
var cursor = mouse.cursor;
var viewport = (0, _editorState.getViewportPosition)(this.props.editorState);
var x = viewport.x;
var y = viewport.y;
var _getBoundingRect = this.getBoundingRect();
var width = _getBoundingRect.width;
var height = _getBoundingRect.height;
return React.createElement(
'div',
{ className: 'coreGraphicsFlexContainer' },
React.createElement(
'style',
null,
'\n .coreGraphicsRendererCanvas * {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n }\n '
),
!!cursor && React.createElement(
'style',
null,
'\n .coreGraphicsRendererCanvas * { cursor: ' + cursor + '!important }\n '
),
React.createElement(
'svg',
{ ref: 'rendererCanvas', className: 'coreGraphicsRendererCanvas coreGraphicsFlexContainer', width: '100%', onMouseMove: function onMouseMove(e) {
onEditorEvent((0, _editorEvents.canvasMouseMove)(_this2.castMouseEvent(e)));_this2.checkEvKey(e);
}, onMouseDown: function onMouseDown(e) {
onEditorEvent((0, _editorEvents.canvasMouseDown)(_this2.castMouseButtonedEvent(e)));_this2.checkEvKey(e);
}, onMouseUp: function onMouseUp(e) {
onEditorEvent((0, _editorEvents.canvasMouseUp)(_this2.castMouseButtonedEvent(e)));_this2.checkEvKey(e);
}, onMouseLeave: function onMouseLeave(e) {
// TODO tests for leave events?
onEditorEvent((0, _editorEvents.canvasMouseUp)(_this2.castMouseButtonedEvent(e)));
onEditorEvent((0, _editorEvents.canvasMouseLeave)(_this2.castMouseEvent(e)));
}, onMouseEnter: function onMouseEnter(e) {
onEditorEvent((0, _editorEvents.canvasMouseEnter)(_this2.castMouseEvent(e)));
_this2.checkEvKey(e);
} },
grid.on && React.createElement(_gridDefs2.default, { vx: -x, vy: -y, size: grid.size }),
React.createElement('rect', { x: 0, y: 0, width: '100%', height: '100%', fill: grid.on ? 'url(#' + _gridDefs.GRID_DEFS_ID + ')' : 'transparent', onMouseDown: function onMouseDown(e) {
return onEditorEvent((0, _editorEvents.canvasBackgroundMouseDown)(_this2.castMouseButtonEvent(e)));
}, onMouseUp: function onMouseUp(e) {
return onEditorEvent((0, _editorEvents.canvasBackgroundMouseUp)(_this2.castMouseButtonEvent(e)));
} }),
React.createElement(
'g',
{ transform: 'translate(' + -x + ' ' + -y + ')' },
React.createElement(_boundingBox.BoundingBoxBackgroundRenderer, { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent }),
React.createElement(_shapesRenderer2.default, { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent }),
React.createElement(_boundingBox.BoundingBoxBorderRenderer, { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent }),
React.createElement(_sceneResizeHandles2.default, { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent }),
React.createElement(_rubberBand2.default, { mode: mode }),
React.createElement(_pointerRenderer2.default, { mode: mode, mouse: mouse, grid: grid, shapesDeclarations: shapesDeclarations })
),
React.createElement(_helperArrowRenderer2.default, { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent, viewport: viewport, viewportWidth: width, viewportHeight: height })
),
React.createElement(_contextMenu2.default, { contextMenuState: contextMenu, contextMenuRenderer: contextMenuRenderer, onEditorEvent: onEditorEvent, viewport: viewport })
);
}
}]);
return Renderer;
}(React.Component);
exports.default = Renderer;