@helpscout/artboard
Version:
A tool kit for React UI development and design
155 lines • 7.72 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var Artboard_ActionTypes_1 = require("./Artboard.ActionTypes");
exports.initialState = {
artboardName: '',
artboardHeight: 400,
artboardWidth: 400,
darkMode: false,
guides: [],
id: undefined,
initialProps: {},
isPerformingAction: false,
isCrosshairActive: false,
isEyeDropperActive: false,
isKeyDown: false,
isMoving: undefined,
isZooming: undefined,
height: undefined,
name: undefined,
width: undefined,
minWidth: undefined,
minHeight: undefined,
maxWidth: undefined,
maxHeight: undefined,
padding: 0,
posX: 0,
posY: 0,
showGuides: true,
showBoxInspector: false,
showInterface: true,
showSizeInspector: false,
showSnapshots: true,
withCenterGuides: true,
withResponsiveHeight: false,
withResponsiveWidth: false,
snapshots: [],
zoomLevel: 1,
};
var _showGuides = exports.initialState.showGuides;
var _showSnapshots = exports.initialState.showSnapshots;
var _showBoxInspector = exports.initialState.showBoxInspector;
var _showSizeInspector = exports.initialState.showSizeInspector;
var _zoomLevel = exports.initialState.zoomLevel;
var _posX = exports.initialState.posX;
var _posY = exports.initialState.posY;
var initialProps = {};
var ZOOM_LEVEL_MAX = 32;
var ZOOM_LEVEL_MIN = 0.125;
var reducer = function (state, action) {
if (state === void 0) { state = exports.initialState; }
var nextZoom = state.zoomLevel;
switch (action.type) {
/**
* GENERAL ACTIONS
*/
case Artboard_ActionTypes_1.default.ON_READY:
initialProps = action.payload.props;
return __assign({}, state, { artboardHeight: null, artboardWidth: null }, initialProps);
case Artboard_ActionTypes_1.default.LOAD_LOCAL_STATE:
return __assign({}, state, action.payload.state);
case Artboard_ActionTypes_1.default.PERFORM_ACTION_START:
return __assign({}, state, { isPerformingAction: true });
case Artboard_ActionTypes_1.default.PERFORM_ACTION_END:
return __assign({}, state, { isPerformingAction: false });
case Artboard_ActionTypes_1.default.RESET:
return __assign({}, exports.initialState, initialProps, { darkMode: state.darkMode });
case Artboard_ActionTypes_1.default.TOGGLE_DARK_MODE:
return __assign({}, state, { darkMode: !state.darkMode });
case Artboard_ActionTypes_1.default.TOGGLE_INTERFACE:
return __assign({}, state, { showInterface: !state.showInterface });
/**
* ZOOM ACTIONS
*/
case Artboard_ActionTypes_1.default.ZOOM_IN_START:
return __assign({}, state, { isKeyDown: true, isPerformingAction: true, isZooming: 'in' });
case Artboard_ActionTypes_1.default.ZOOM_OUT_START:
return __assign({}, state, { isKeyDown: true, isPerformingAction: true, isZooming: 'out' });
case Artboard_ActionTypes_1.default.ZOOM_IN:
nextZoom = state.zoomLevel * 2;
return __assign({}, state, { zoomLevel: nextZoom > ZOOM_LEVEL_MAX ? ZOOM_LEVEL_MAX : nextZoom });
case Artboard_ActionTypes_1.default.ZOOM_OUT:
nextZoom = state.zoomLevel / 2;
return __assign({}, state, { zoomLevel: nextZoom < ZOOM_LEVEL_MIN ? ZOOM_LEVEL_MIN : nextZoom });
case Artboard_ActionTypes_1.default.ZOOM_RESET:
return __assign({}, state, { isZooming: undefined });
/**
* MOVE ACTIONS
*/
case Artboard_ActionTypes_1.default.MOVE_START:
return __assign({}, state, { isKeyDown: true, isPerformingAction: true, isMoving: 'start' });
case Artboard_ActionTypes_1.default.MOVE_DRAG_START:
return __assign({}, state, { isMoving: 'dragging' });
case Artboard_ActionTypes_1.default.MOVE_DRAG_END:
return __assign({}, state, { isMoving: 'start', isKeyDown: false });
case Artboard_ActionTypes_1.default.MOVE_DRAG:
return __assign({}, state, { isMoving: 'dragging', posX: Math.round(state.posX + (action.payload.posX * 1) / state.zoomLevel), posY: Math.round(state.posY + (action.payload.posY * 1) / state.zoomLevel) });
case Artboard_ActionTypes_1.default.MOVE_END:
return __assign({}, state, { isMoving: undefined });
/**
* RESIZE ACTIONS
*/
case Artboard_ActionTypes_1.default.RESIZE_ARTBOARD:
return __assign({}, state, { artboardWidth: action.payload.artboardWidth, artboardHeight: action.payload.artboardHeight });
/**
* TOOLBAR ACTIONS
*/
case Artboard_ActionTypes_1.default.TOGGLE_GUIDES:
return __assign({}, state, { showGuides: !state.showGuides });
case Artboard_ActionTypes_1.default.TOGGLE_BOX_INSPECTOR:
return __assign({}, state, { showBoxInspector: !state.showBoxInspector });
case Artboard_ActionTypes_1.default.TOGGLE_SIZE_INSPECTOR:
return __assign({}, state, { showSizeInspector: !state.showSizeInspector });
case Artboard_ActionTypes_1.default.EYEDROPPER_START:
_posX = state.posX;
_posY = state.posY;
_showGuides = state.showGuides;
_showSnapshots = state.showSnapshots;
_showBoxInspector = state.showBoxInspector;
_zoomLevel = state.zoomLevel;
return __assign({}, state, { isCrosshairActive: false, isEyeDropperActive: true, isPerformingAction: true, posX: 0, posY: 0, showGuides: false, showSnapshots: false, showBoxInspector: false, zoomLevel: 1 });
case Artboard_ActionTypes_1.default.EYEDROPPER_READY:
return __assign({}, state, { isPerformingAction: true });
case Artboard_ActionTypes_1.default.EYEDROPPER_STOP:
return __assign({}, state, { isEyeDropperActive: false, isPerformingAction: false, posX: _posX, posY: _posY, showGuides: _showGuides, showBoxInspector: _showBoxInspector, showSnapshots: _showSnapshots, zoomLevel: _zoomLevel });
case Artboard_ActionTypes_1.default.CROSSHAIR_START:
_showBoxInspector = state.showBoxInspector;
_showSizeInspector = state.showSizeInspector;
return __assign({}, state, { isCrosshairActive: true, showSnapshots: true, showBoxInspector: false, showSizeInspector: false });
case Artboard_ActionTypes_1.default.CROSSHAIR_END:
return __assign({}, state, { isCrosshairActive: false, showBoxInspector: _showBoxInspector, showSizeInspector: _showSizeInspector });
case Artboard_ActionTypes_1.default.CROSSHAIR_ADD_SNAPSHOT:
return __assign({}, state, { snapshots: state.snapshots.concat([action.payload.snapshot]) });
case Artboard_ActionTypes_1.default.CROSSHAIR_SHOW_SNAPSHOTS:
return __assign({}, state, { showSnapshots: true });
case Artboard_ActionTypes_1.default.CROSSHAIR_HIDE_SNAPSHOTS:
return __assign({}, state, { showSnapshots: false });
case Artboard_ActionTypes_1.default.CROSSHAIR_CLEAR:
return __assign({}, state, { snapshots: [] });
default:
return state;
}
};
exports.default = reducer;
//# sourceMappingURL=Artboard.reducers.js.map