@gorpacrate/core-graphics
Version:
A core library for creating shape-based graphic editors
186 lines • 10.9 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var Mousetrap = require("mousetrap");
var React = require("react");
var editor_events_1 = require("../editor-state/editor-events");
var input_1 = require("../editor-state/events/input");
var editor_state_1 = require("../helpers/editor-state");
var css_1 = require("../utils/css");
var events_1 = require("../utils/events");
var bounding_box_1 = require("./bounding-box");
var context_menu_1 = require("./context-menu");
var grid_defs_1 = require("./grid-defs");
var helper_arrow_renderer_1 = require("./helper-arrow-renderer");
var pointer_renderer_1 = require("./pointer-renderer");
var rubber_band_1 = require("./rubber-band");
var scene_resize_handles_1 = require("./scene-resize-handles");
var shapes_renderer_1 = require("./shapes-renderer");
exports.___ = !!input_1.ButtonType;
var MODIFIER_KEYS_MAP = [
['ctrl', editor_events_1.SceneModifierKey.Ctrl],
['shift', editor_events_1.SceneModifierKey.Shift],
['alt', editor_events_1.SceneModifierKey.Alt],
['shift+alt', editor_events_1.SceneModifierKey.Alt],
['ctrl+shift', editor_events_1.SceneModifierKey.Shift],
['shift+ctrl', editor_events_1.SceneModifierKey.Ctrl]
];
var EV_AND_SCENE_MOD_KEYS = [
{ getKey: function (e) { return e.altKey; }, sceneKey: editor_events_1.SceneModifierKey.Alt },
{ getKey: function (e) { return e.ctrlKey; }, sceneKey: editor_events_1.SceneModifierKey.Ctrl },
{ getKey: function (e) { return e.shiftKey; }, sceneKey: editor_events_1.SceneModifierKey.Shift }
];
var Renderer = /** @class */ (function (_super) {
tslib_1.__extends(Renderer, _super);
function Renderer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.rendererCanvasNode = null;
_this.setRendererCanvasNode = function (svg) {
_this.rendererCanvasNode = svg;
};
_this.onCanvasMouseMove = function (e) {
_this.props.onEditorEvent(editor_events_1.canvasMouseMove(_this.castMouseEvent(e)));
_this.checkEvKey(e);
};
_this.onCanvasMouseDown = function (e) {
_this.props.onEditorEvent(editor_events_1.canvasMouseDown(_this.castMouseButtonedEvent(e)));
_this.checkEvKey(e);
};
_this.onCanvasMouseUp = function (e) {
_this.props.onEditorEvent(editor_events_1.canvasMouseUp(_this.castMouseButtonedEvent(e)));
_this.checkEvKey(e);
};
_this.onCanvasMouseLeave = function (e) {
// TODO tests for leave events?
_this.props.onEditorEvent(editor_events_1.canvasMouseUp(_this.castMouseButtonedEvent(e)));
_this.props.onEditorEvent(editor_events_1.canvasMouseLeave(_this.castMouseEvent(e)));
};
_this.onCanvasMouseEnter = function (e) {
_this.props.onEditorEvent(editor_events_1.canvasMouseEnter(_this.castMouseEvent(e)));
_this.checkEvKey(e);
};
_this.onCanvasBackgroundMouseDown = function (e) {
_this.props.onEditorEvent(editor_events_1.canvasBackgroundMouseDown(_this.castMouseButtonEvent(e)));
};
_this.onCanvasBackgroundMouseUp = function (e) {
_this.props.onEditorEvent(editor_events_1.canvasBackgroundMouseUp(_this.castMouseButtonEvent(e)));
};
_this.onCanvasTouchMove = function (e) {
_this.props.onEditorEvent(editor_events_1.canvasMouseMove(_this.castTouchEvent(e)));
_this.checkEvKey(e);
};
_this.onCanvasTouchStart = function (e) {
_this.props.onEditorEvent(editor_events_1.canvasMouseDown(_this.castTouchButtonedEvent(e)));
_this.checkEvKey(e);
};
_this.onCanvasTouchEnd = function (e) {
_this.props.onEditorEvent(editor_events_1.canvasMouseUp(_this.castTouchButtonedEvent(e)));
_this.checkEvKey(e);
};
_this.onCanvasBackgroundTouchStart = function () {
_this.props.onEditorEvent(editor_events_1.canvasBackgroundMouseDown(_this.castTouchButtonEvent()));
};
_this.onCanvasBackgroundTouchEnd = function () {
_this.props.onEditorEvent(editor_events_1.canvasBackgroundMouseUp(_this.castTouchButtonEvent()));
};
return _this;
}
Renderer.prototype.getBoundingRect = function () {
var node = this.rendererCanvasNode;
// const node = this.refs['rendererCanvas'] as Element;
if (!node) {
return {
left: 0,
right: 0,
top: 0,
bottom: 0,
width: 0,
height: 0
};
}
var _a = this.props.editorState.viewport, vx = _a.x, vy = _a.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
Renderer.prototype.componentDidMount = function () {
var onEditorEvent = this.props.onEditorEvent;
MODIFIER_KEYS_MAP.forEach(function (key) {
var keySym = key[0], keyType = key[1];
Mousetrap.bind(keySym, function () { return onEditorEvent(editor_events_1.canvasModifierKeyDown(keyType)); });
Mousetrap.bind(keySym, function () { return onEditorEvent(editor_events_1.canvasModifierKeyUp(keyType)); }, 'keyup');
});
};
Renderer.prototype.componentWillUnmount = function () {
MODIFIER_KEYS_MAP.forEach(function (key) {
var keySym = key[0];
Mousetrap.unbind(keySym);
Mousetrap.unbind(keySym, 'keyup');
});
};
// check keys on all events, update when changed
Renderer.prototype.checkEvKey = function (e) {
var onEditorEvent = this.props.onEditorEvent;
var modifierKeys = this.props.editorState.modifierKeys;
EV_AND_SCENE_MOD_KEYS.forEach(function (decl) {
var getKey = decl.getKey, sceneKey = decl.sceneKey;
var evKey = getKey(e);
if (!!evKey !== !!modifierKeys[sceneKey]) {
return (evKey) ?
onEditorEvent(editor_events_1.canvasModifierKeyDown(sceneKey)) :
onEditorEvent(editor_events_1.canvasModifierKeyUp(sceneKey));
}
});
};
Renderer.prototype.castMouseEvent = function (e) {
return events_1.getMouseEventParams(this.getBoundingRect(), e);
};
Renderer.prototype.castMouseButtonedEvent = function (e) {
return events_1.getMouseButtonedEventParams(this.getBoundingRect(), e);
};
Renderer.prototype.castMouseButtonEvent = function (e) {
return events_1.getMouseEventButton(e);
};
Renderer.prototype.castTouchEvent = function (e) {
return events_1.getTouchEventParams(this.getBoundingRect(), e);
};
Renderer.prototype.castTouchButtonedEvent = function (e) {
return events_1.getTouchButtonedEventParams(this.getBoundingRect(), e);
};
Renderer.prototype.castTouchButtonEvent = function () {
return events_1.getTouchEventButton();
};
Renderer.prototype.render = function () {
var _a = this.props, onEditorEvent = _a.onEditorEvent, contextMenuRenderer = _a.contextMenuRenderer;
var _b = this.props.editorState, mouse = _b.mouse, mode = _b.mode, scene = _b.scene, shapesDeclarations = _b.shapesDeclarations, contextMenu = _b.contextMenu, grid = _b.grid;
var cursor = mouse.cursor;
var viewport = editor_state_1.getViewportPosition(this.props.editorState);
var x = viewport.x, y = viewport.y;
var _c = this.getBoundingRect(), width = _c.width, height = _c.height;
return (React.createElement("div", { className: css_1.cssName('flexContainer') },
React.createElement("style", null, "\n ." + css_1.cssName('rendererCanvas') + " * {\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 ." + css_1.cssName('rendererCanvas') + " * { cursor: " + cursor + "!important }\n ")),
React.createElement("svg", { ref: this.setRendererCanvasNode, className: css_1.cssName('rendererCanvas') + " " + css_1.cssName('flexContainer'), width: '100%', onMouseMove: this.onCanvasMouseMove, onMouseDown: this.onCanvasMouseDown, onMouseUp: this.onCanvasMouseUp, onMouseLeave: this.onCanvasMouseLeave, onMouseEnter: this.onCanvasMouseEnter, onTouchMove: this.onCanvasTouchMove, onTouchStart: this.onCanvasTouchStart, onTouchEnd: this.onCanvasTouchEnd },
grid.on && React.createElement(grid_defs_1["default"], { vx: -x, vy: -y, size: grid.size }),
React.createElement("rect", { x: 0, y: 0, width: '100%', height: '100%', fill: grid.on ? "url(#" + grid_defs_1.GRID_DEFS_ID + ")" : 'transparent', onMouseDown: this.onCanvasBackgroundMouseDown, onMouseUp: this.onCanvasBackgroundMouseUp, onTouchStart: this.onCanvasBackgroundTouchStart, onTouchEnd: this.onCanvasBackgroundTouchEnd }),
React.createElement("g", { transform: "translate(" + -x + " " + -y + ")" },
React.createElement(bounding_box_1.BoundingBoxBackgroundRenderer, { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent }),
React.createElement(shapes_renderer_1["default"], { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent }),
React.createElement(bounding_box_1.BoundingBoxBorderRenderer, { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent }),
React.createElement(scene_resize_handles_1["default"], { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent }),
React.createElement(rubber_band_1["default"], { mode: mode }),
React.createElement(pointer_renderer_1["default"], { mode: mode, mouse: mouse, grid: grid, shapesDeclarations: shapesDeclarations })),
React.createElement(helper_arrow_renderer_1["default"], { mode: mode, scene: scene, shapesDeclarations: shapesDeclarations, onEditorEvent: onEditorEvent, viewport: viewport, viewportWidth: width, viewportHeight: height })),
React.createElement(context_menu_1["default"], { contextMenuState: contextMenu, contextMenuRenderer: contextMenuRenderer, onEditorEvent: onEditorEvent, viewport: viewport })));
};
return Renderer;
}(React.Component));
exports["default"] = Renderer;
//# sourceMappingURL=renderer.js.map