mirror of
https://github.com/Doodle3D/Doodle3D-Core.git
synced 2024-07-01 15:41:21 +02:00
201 lines
6.1 KiB
JavaScript
201 lines
6.1 KiB
JavaScript
|
import React from 'react';
|
||
|
import PropTypes from 'prop-types';
|
||
|
import * as actions from 'doodle3d-core/actions/index.js';
|
||
|
import { connect } from 'react-redux';
|
||
|
import * as contextTools from 'doodle3d-core/constants/contextTools';
|
||
|
import * as d2Tools from 'doodle3d-core/constants/d2Tools';
|
||
|
import { createSelector } from 'reselect';
|
||
|
import Menu from 'src/js/components/Menu.js';
|
||
|
import SubMenu from 'src/js/components/SubMenu.js';
|
||
|
import MenuItem from 'src/js/components/MenuItem.js';
|
||
|
// import createDebug from 'debug';
|
||
|
// const debug = createDebug('d3d:sketchertoolbars');
|
||
|
|
||
|
const TOOLBAR2D = 'toolbar2d';
|
||
|
const TOOLBAR3D = 'toolbar3d';
|
||
|
const CONTEXT = 'context';
|
||
|
|
||
|
class SketcherToolbars extends React.Component {
|
||
|
|
||
|
static propTypes = {
|
||
|
dispatch: PropTypes.func.isRequired,
|
||
|
toolbar2d: PropTypes.object, // TODO: specify further
|
||
|
toolbar3d: PropTypes.object, // TODO: specify further
|
||
|
context: PropTypes.object // TODO: specify further
|
||
|
};
|
||
|
onSelect2D = ({ value }) => {
|
||
|
const { dispatch } = this.props;
|
||
|
dispatch(actions.d2ChangeTool(value));
|
||
|
};
|
||
|
onSelect3D = ({ value }) => {
|
||
|
this.props.dispatch(actions.d3ChangeTool(value));
|
||
|
};
|
||
|
onSelectContext = ({ value }) => {
|
||
|
switch (value) {
|
||
|
case contextTools.DUPLICATE:
|
||
|
this.props.dispatch(actions.duplicateSelection(value));
|
||
|
break;
|
||
|
|
||
|
case contextTools.DELETE:
|
||
|
this.props.dispatch(actions.deleteSelection(value));
|
||
|
break;
|
||
|
|
||
|
case contextTools.UNION:
|
||
|
this.props.dispatch(actions.union(value));
|
||
|
break;
|
||
|
|
||
|
case contextTools.INTERSECT:
|
||
|
this.props.dispatch(actions.intersect(value));
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
const { dispatch } = this.props;
|
||
|
dispatch(actions.contextChangeTool(value));
|
||
|
break;
|
||
|
}
|
||
|
};
|
||
|
onOpen = ({ menuValue }) => {
|
||
|
this.props.dispatch(actions.menuOpen(menuValue));
|
||
|
};
|
||
|
onClose = ({ menuValue }) => {
|
||
|
this.props.dispatch(actions.menuClose(menuValue));
|
||
|
};
|
||
|
renderToolbar = (value, onSelect, data) => {
|
||
|
return (
|
||
|
<div id={`${value}-container`}>
|
||
|
<Menu
|
||
|
id={value}
|
||
|
value={value}
|
||
|
className="toolbar"
|
||
|
onSelect={onSelect}
|
||
|
onOpen={this.onOpen}
|
||
|
onClose={this.onClose}
|
||
|
selectedValue={data.selected}
|
||
|
>
|
||
|
{renderChildren(data.children)}
|
||
|
</Menu>
|
||
|
</div>
|
||
|
);
|
||
|
};
|
||
|
render() {
|
||
|
const { toolbar2d, toolbar3d, context } = this.props;
|
||
|
|
||
|
return (
|
||
|
<div>
|
||
|
<div id="sketcher-toolbars">
|
||
|
{this.renderToolbar(TOOLBAR2D, this.onSelect2D, toolbar2d)}
|
||
|
{this.renderToolbar(TOOLBAR3D, this.onSelect3D, toolbar3d)}
|
||
|
</div>
|
||
|
{context.children.length > 0 && <div className="centerer">
|
||
|
{this.renderToolbar(CONTEXT, this.onSelectContext, context)}
|
||
|
</div>}
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
function renderChildren(children) {
|
||
|
const components = [];
|
||
|
|
||
|
for (const child of children) {
|
||
|
let component;
|
||
|
if (child.children.length > 0) {
|
||
|
component = (
|
||
|
<SubMenu
|
||
|
id={child.value}
|
||
|
value={child.value}
|
||
|
key={child.value}
|
||
|
selectedValue={child.selected}
|
||
|
open={child.open}
|
||
|
svg={child.svg}
|
||
|
selectOnOpen={child.selectOnOpen}
|
||
|
toggleBehavior={child.toggleBehavior}
|
||
|
>
|
||
|
{renderChildren(child.children)}
|
||
|
</SubMenu>
|
||
|
);
|
||
|
} else {
|
||
|
component = (
|
||
|
<MenuItem
|
||
|
id={child.value}
|
||
|
value={child.value}
|
||
|
key={child.value}
|
||
|
svg={child.svg}
|
||
|
disabled={child.disabled}
|
||
|
/>
|
||
|
);
|
||
|
}
|
||
|
components.push(component);
|
||
|
}
|
||
|
return components;
|
||
|
}
|
||
|
|
||
|
function filterMenus(numSelectedObjects, allObjectsAreFilled, activeTool, menus) {
|
||
|
const showUnion = activeTool === d2Tools.TRANSFORM && allObjectsAreFilled && numSelectedObjects >= 2;
|
||
|
const showIntersect = activeTool === d2Tools.TRANSFORM && numSelectedObjects >= 1;
|
||
|
return {
|
||
|
...menus,
|
||
|
children: menus.children.filter(({ value }) => {
|
||
|
switch (value) {
|
||
|
case contextTools.ADVANCED:
|
||
|
return showUnion || showIntersect;
|
||
|
|
||
|
case contextTools.UNION:
|
||
|
return showUnion;
|
||
|
|
||
|
case contextTools.INTERSECT:
|
||
|
return showIntersect;
|
||
|
|
||
|
case contextTools.DUPLICATE:
|
||
|
case contextTools.DELETE:
|
||
|
case contextTools.FILL_TOGGLE:
|
||
|
return numSelectedObjects > 0;
|
||
|
|
||
|
case contextTools.ALIGN:
|
||
|
return numSelectedObjects > 1;
|
||
|
|
||
|
case contextTools.COLOR_PICKER:
|
||
|
if (activeTool === d2Tools.ERASER) return false;
|
||
|
if (activeTool === d2Tools.TRANSFORM && numSelectedObjects === 0) return false;
|
||
|
return true;
|
||
|
|
||
|
case contextTools.ERASER_SIZE:
|
||
|
return activeTool === d2Tools.ERASER;
|
||
|
|
||
|
case contextTools.BRUSH_SIZE:
|
||
|
return activeTool === d2Tools.BRUSH;
|
||
|
|
||
|
default:
|
||
|
return true;
|
||
|
}
|
||
|
}).map(child => {
|
||
|
return filterMenus(numSelectedObjects, allObjectsAreFilled, activeTool, child);
|
||
|
})
|
||
|
};
|
||
|
}
|
||
|
|
||
|
function nestChildren(menus, target) {
|
||
|
// const targetStr = JSON.stringify(target);
|
||
|
const children = target.children.map(value => nestChildren(menus, menus[value]));
|
||
|
const { selected } = target;
|
||
|
return {
|
||
|
svg: selected && children.find(({ value }) => value === selected).svg,
|
||
|
...target,
|
||
|
selected,
|
||
|
children: children.filter(({ hide }) => !hide)
|
||
|
};
|
||
|
}
|
||
|
|
||
|
const getMenus = createSelector([
|
||
|
state => state.sketcher.present.menus,
|
||
|
state => state.sketcher.present.selection.objects.length,
|
||
|
state => state.sketcher.present.selection.objects.every(({ id }) => state.sketcher.present.objectsById[id].fill),
|
||
|
state => state.sketcher.present.d2.tool
|
||
|
], (menus, numSelectedObjects, allObjectsAreFilled, activeTool) => ({
|
||
|
toolbar2d: filterMenus(numSelectedObjects, allObjectsAreFilled, activeTool, nestChildren(menus, menus[TOOLBAR2D])),
|
||
|
toolbar3d: filterMenus(numSelectedObjects, allObjectsAreFilled, activeTool, nestChildren(menus, menus[TOOLBAR3D])),
|
||
|
context: filterMenus(numSelectedObjects, allObjectsAreFilled, activeTool, nestChildren(menus, menus[CONTEXT]))
|
||
|
}));
|
||
|
|
||
|
export default connect(getMenus)(SketcherToolbars);
|