@gorpacrate/core-graphics
Version:
A core library for creating shape-based graphic editors
134 lines • 6.49 kB
JavaScript
;
exports.__esModule = true;
var tslib_1 = require("tslib");
var _a, _b, _c, _d, _e;
var React = require("react");
var history_event_1 = require("../../history/history-event");
var editor_events_1 = require("../editor-events");
var editor_state_1 = require("../editor-state");
var editor_state_reducer_1 = require("../editor-state-reducer");
exports.LINE = 'LINE';
exports.LINE_IGNORE_GRID = 'LINE_IGNORE_GRID';
function getRectBoundingBox(shapeData) {
var keyPoints = shapeData.keyPoints;
var _a = keyPoints[0], x1 = _a.x, y1 = _a.y;
var _b = keyPoints[1], x2 = _b.x, y2 = _b.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
};
}
exports.getRectBoundingBox = getRectBoundingBox;
function draw2Points(_a) {
var mouseCoords, event_1, _b, x, y, _c, endX, endY;
var startX = _a.startX, startY = _a.startY;
return tslib_1.__generator(this, function (_d) {
switch (_d.label) {
case 0:
mouseCoords = { x: startX, y: startY };
_d.label = 1;
case 1:
if (!true) return [3 /*break*/, 3];
return [4 /*yield*/, [{ x: startX, y: startY }, { x: mouseCoords.x, y: mouseCoords.y }]];
case 2:
event_1 = _d.sent();
if (editor_events_1.isMouseMoveEvent(event_1)) {
_b = event_1.payload, x = _b.x, y = _b.y;
mouseCoords.x = x;
mouseCoords.y = y;
}
if (editor_events_1.isMouseUpEvent(event_1)) {
_c = event_1.payload, endX = _c.x, endY = _c.y;
return [2 /*return*/, [{ x: startX, y: startY }, { x: endX, y: endY }]];
}
return [3 /*break*/, 1];
case 3: return [2 /*return*/];
}
});
}
exports.draw2Points = draw2Points;
exports.STROKE_WIDTH = 'STROKE_WIDTH';
exports.STROKE_COLOR = 'STROKE_COLOR';
exports.LINE_DECLARATION = {
type: exports.LINE,
displayName: 'Line',
draw: draw2Points,
graphicalContextParams: [exports.STROKE_WIDTH, exports.STROKE_COLOR],
drawingModeCanvasCursor: 'crosshair',
minResizeWidth: 0,
minResizeHeight: 0,
render: function (shapeData, events, _, _a) {
var cursor = _a.cursor;
var keyPoints = shapeData.keyPoints;
var _b = keyPoints[0], x1 = _b.x, y1 = _b.y;
var _c = keyPoints[1], x2 = _c.x, y2 = _c.y;
return (React.createElement("line", tslib_1.__assign({ style: { cursor: cursor }, onMouseDown: events.onMouseDown, onMouseUp: events.onMouseUp }, { x1: x1, y1: y1, x2: x2, y2: y2 }, { stroke: 'green', strokeWidth: '2' })));
},
getBoundingBox: getRectBoundingBox
};
exports.LINE_IGNORE_GRID_DECLARATION = tslib_1.__assign({}, exports.LINE_DECLARATION, { type: exports.LINE_IGNORE_GRID, ignoreGrid: true });
exports.SHAPES_DECLARATIONS = (_a = {},
_a[exports.LINE] = exports.LINE_DECLARATION,
_a[exports.LINE_IGNORE_GRID] = exports.LINE_IGNORE_GRID_DECLARATION,
_a);
// export const INITIAL_STATE = getInitialEditorState
exports.ALICE = 'ALICE';
exports.BOB = 'BOB';
exports.EVE = 'EVE';
exports.ALICE_LINE_ID = '0';
exports.BOB_LINE_ID = '1';
exports.EVE_LINE_ID = '2';
exports.ALICE_LINE = {
type: exports.LINE,
id: exports.ALICE_LINE_ID,
keyPoints: [{ x: 10, y: 10 }, { x: 20, y: 20 }],
graphicalContextData: (_b = {}, _b[exports.STROKE_WIDTH] = 2, _b[exports.STROKE_COLOR] = '#000', _b)
};
exports.ALICE_UPDATED_LINE = {
type: exports.LINE,
id: exports.ALICE_LINE_ID,
keyPoints: [{ x: 30, y: 30 }, { x: 40, y: 40 }],
graphicalContextData: (_c = {}, _c[exports.STROKE_WIDTH] = 2, _c[exports.STROKE_COLOR] = '#000', _c)
};
exports.BOB_LINE = {
type: exports.LINE,
id: exports.BOB_LINE_ID,
keyPoints: [{ x: 20, y: 20 }, { x: 30, y: 30 }],
graphicalContextData: (_d = {}, _d[exports.STROKE_WIDTH] = 4, _d[exports.STROKE_COLOR] = '#111', _d)
};
exports.EVE_LINE = {
type: exports.LINE,
id: exports.EVE_LINE_ID,
keyPoints: [{ x: 10, y: 10 }, { x: 20, y: 10 }],
graphicalContextData: (_e = {}, _e[exports.STROKE_WIDTH] = 6, _e[exports.STROKE_COLOR] = '#222', _e)
};
function makePersistedHistory() {
var items = [];
for (var _i = 0; _i < arguments.length; _i++) {
items[_i] = arguments[_i];
}
return items.map(function (item, index) { return history_event_1.getPersistedHistoryEvent({
author: item[0],
applied: item[1],
id: index.toString()
}, item[2]); });
}
exports["default"] = makePersistedHistory([exports.ALICE, true, history_event_1.shapeAddEvent(exports.ALICE_LINE)], [exports.BOB, false, history_event_1.shapeAddEvent(exports.BOB_LINE)], [exports.BOB, false, history_event_1.shapeRemoveEvent(exports.BOB_LINE_ID)], [exports.ALICE, true, history_event_1.shapeUpdateEvent(exports.ALICE_LINE_ID, exports.ALICE_UPDATED_LINE)], [exports.ALICE, false, history_event_1.eraseAllEvent()], [exports.EVE, true, history_event_1.shapeChangeOrderEvent({
shapeId: exports.ALICE_LINE.id,
value: 1,
relative: true
})], [exports.EVE, true, history_event_1.shapeUpdateEvent(exports.ALICE_LINE_ID, exports.ALICE_LINE)]);
exports.ALICE_BOB_LINES = makePersistedHistory([exports.ALICE, true, history_event_1.shapeAddEvent(exports.ALICE_LINE)], [exports.BOB, true, history_event_1.shapeAddEvent(exports.BOB_LINE)]);
exports.ALICE_BOB_EVE_LINES = makePersistedHistory([exports.ALICE, true, history_event_1.shapeAddEvent(exports.ALICE_LINE)], [exports.BOB, true, history_event_1.shapeAddEvent(exports.BOB_LINE)], [exports.EVE, true, history_event_1.shapeAddEvent(exports.EVE_LINE)]);
exports.ALICE_BOB_LINES_EDITOR_STATE = editor_state_reducer_1["default"](editor_state_1.getInitialEditorState({
shapesDeclarations: exports.SHAPES_DECLARATIONS, author: exports.ALICE
}), editor_events_1.updateHistory(exports.ALICE_BOB_LINES));
exports.ALICE_BOB_EVE_LINES_EDITOR_STATE = editor_state_reducer_1["default"](editor_state_1.getInitialEditorState({
shapesDeclarations: exports.SHAPES_DECLARATIONS, author: exports.ALICE
}), editor_events_1.updateHistory(exports.ALICE_BOB_EVE_LINES));
exports.EMPTY_ALICE_STATE = editor_state_1.getInitialEditorState({
shapesDeclarations: exports.SHAPES_DECLARATIONS, author: exports.ALICE
});
//# sourceMappingURL=test-history.spec-data.js.map