@gorpacrate/core-graphics/lib/editor-state/reducer/draw.js

A core library for creating shape-based graphic editors

"use strict";
exports.__esModule = true;
var i = require("icepick");
var invariant = require("invariant");
var declarations_1 = require("../../declarations");
var history_event_1 = require("../../history/history-event");
var grid_1 = require("../../utils/grid");
var pick_1 = require("../../utils/pick");
var unique_id_1 = require("../../utils/unique-id");
var editor_action_1 = require("../editor-action");
var input_1 = require("../events/input");
exports.DRAWN_SHAPE_ID = '___';
var REDUCERS = [
    drawingModeEnterReducer,
    drawingModeStateReducer,
    drawingPreviewStateReducer
];
function drawStateReducer(currentState, ev) {
    return REDUCERS.reduce(function (res, fn) { return fn(res, ev); }, currentState);
}
exports["default"] = drawStateReducer;
function drawingModeEnterReducer(currentState, ev) {
    var mode = currentState.mode;
    if (!(input_1.isEditorInputEvent(ev) && declarations_1.isDrawingShapeMode(mode))) {
        return currentState;
    }
    else {
        if (input_1.isMouseDownEvent(ev) &&
            (ev.payload.button === input_1.ButtonType.Left) && !mode.payload.drawing) {
            // start drawing
            var shapeType = mode.payload.shapeType;
            var shapeDeclaration = currentState.shapesDeclarations[shapeType];
            var _a = shapeDeclaration.ignoreGrid ? (ev.payload) : grid_1.snapCoordsIfNeeded(currentState.grid, ev.payload), x = _a.x, y = _a.y;
            var drawingGenerator = shapeDeclaration.draw({ startX: x, startY: y });
            var drawnKeyPoints = drawingGenerator.next().value;
            return i.merge(currentState, {
                mode: {
                    payload: {
                        drawing: true,
                        drawingGenerator: drawingGenerator,
                        drawnKeyPoints: drawnKeyPoints
                    }
                }
            });
        }
        return currentState;
    }
}
function drawingModeStateReducer(currentState, ev) {
    var mode = currentState.mode;
    if (!(input_1.isEditorInputEvent(ev) && declarations_1.isDrawingShapeMode(mode) && mode.payload.drawing)) {
        return currentState;
    }
    else {
        // drawing process : iterate on the .draw() generator until done
        // snap event to grid if needed
        var shapeDeclaration = currentState.shapesDeclarations[mode.payload.shapeType];
        var castEv = shapeDeclaration.ignoreGrid ? ev : grid_1.snapEditorInputEventCoordsIfNeeded(currentState.grid, ev);
        if (!mode.payload.drawingGenerator) {
            return invariant(false, 'no drawing generator');
        }
        var _a = mode.payload.drawingGenerator.next(castEv), done = _a.done, newlyDrawnKeyPoints = _a.value;
        if (done || (input_1.isMouseLeaveEvent(ev))) {
            var shapesDeclarations = currentState.shapesDeclarations, graphicalContextData = currentState.graphicalContextData;
            var shapeType = mode.payload.shapeType;
            // TODO get shape data in another function
            var shapeDecl = shapesDeclarations[shapeType];
            // TODO extract
            var graphicalContextParamsTypes = shapeDecl.graphicalContextParams;
            var mergedValue = pick_1.pick(graphicalContextData, graphicalContextParamsTypes);
            var id = unique_id_1["default"]();
            var shapeData = {
                type: shapeType, id: id,
                graphicalContextData: mergedValue,
                keyPoints: newlyDrawnKeyPoints
            };
            // push history action to the queue and update mode
            // const { editorActionsQueu
            // e } = currentState;
            var previewedEvent = history_event_1.shapeAddEvent(shapeData);
            var _b = shapesDeclarations[shapeType], hasSubSelectedMode = _b.hasSubSelectedMode, noSelectAfterDrawn = _b.noSelectAfterDrawn;
            var assocedQueue = i.chain(currentState)
                .assoc('editorActionsQueue', i.push(currentState.editorActionsQueue, editor_action_1.pushHistoryEventAction(history_event_1.shapeAddEvent(shapeData))))
                .assoc('previewedHistoryEvents', [previewedEvent])
                .value();
            if (!noSelectAfterDrawn) {
                var nextMode = hasSubSelectedMode ? declarations_1.modeSubSelected(id) : declarations_1.modeSelected([id]);
                return i.assoc(assocedQueue, 'mode', nextMode);
            }
            else {
                return i.assocIn(assocedQueue, ['mode', 'payload', 'drawing'], false);
            }
        }
        else {
            return i.merge(currentState, {
                mode: { payload: { drawnKeyPoints: newlyDrawnKeyPoints } }
            });
        }
    }
}
function drawingPreviewStateReducer(currentState) {
    var mode = currentState.mode;
    if (!(declarations_1.isDrawingShapeMode(mode) && mode.payload.drawing)) {
        return currentState;
    }
    else {
        var graphicalContextData = currentState.graphicalContextData;
        var _a = mode.payload, shapeType = _a.shapeType, drawnKeyPoints = _a.drawnKeyPoints;
        var shapeDeclaration = currentState.shapesDeclarations[mode.payload.shapeType];
        var customParams = shapeDeclaration.initialCustomParams || undefined;
        // set custom params to initial
        var shapeData = {
            type: shapeType,
            id: exports.DRAWN_SHAPE_ID,
            graphicalContextData: graphicalContextData,
            keyPoints: drawnKeyPoints
        };
        if (customParams) {
            shapeData = i.assoc(shapeData, 'customParams', customParams);
        }
        var event_1 = history_event_1.shapeAddEvent(shapeData);
        return i.assoc(currentState, 'previewedHistoryEvents', [event_1]);
    }
}
//# sourceMappingURL=draw.js.map