kitchen-simulator 5.0.0-test.4 → 5.0.0-test.5

package/src/components/sidebar/panel-layer-elements.jsx

@@ -1,298 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Panel from './panel';
-import {
-  MODE_IDLE,
-  MODE_2D_ZOOM_IN,
-  MODE_2D_ZOOM_OUT,
-  MODE_2D_PAN,
-  MODE_3D_VIEW,
-  MODE_3D_FIRST_PERSON,
-  MODE_WAITING_DRAWING_LINE,
-  MODE_DRAWING_LINE,
-  MODE_DRAWING_HOLE,
-  MODE_DRAWING_ITEM,
-  MODE_DRAGGING_LINE,
-  MODE_DRAGGING_VERTEX,
-  MODE_DRAGGING_ITEM,
-  MODE_DRAGGING_HOLE,
-  MODE_FITTING_IMAGE,
-  MODE_UPLOADING_IMAGE,
-  MODE_ROTATING_ITEM,
-  MODE_IDLE_3D,
-  MODE_DRAGGING_ITEM_3D,
-  MODE_ROTATING_ITEM_3D
-} from '../../constants';
-import * as SharedStyle from '../../shared-style';
-import { MdSearch } from 'react-icons/md';
-
-const VISIBILITY_MODE = {
-  MODE_IDLE,
-  MODE_2D_ZOOM_IN,
-  MODE_2D_ZOOM_OUT,
-  MODE_2D_PAN,
-  MODE_3D_VIEW,
-  MODE_3D_FIRST_PERSON,
-  MODE_WAITING_DRAWING_LINE,
-  MODE_DRAWING_LINE,
-  MODE_DRAWING_HOLE,
-  MODE_DRAWING_ITEM,
-  MODE_DRAGGING_LINE,
-  MODE_DRAGGING_VERTEX,
-  MODE_DRAGGING_ITEM,
-  MODE_DRAGGING_HOLE,
-  MODE_FITTING_IMAGE,
-  MODE_UPLOADING_IMAGE,
-  MODE_ROTATING_ITEM,
-  MODE_IDLE_3D,
-  MODE_DRAGGING_ITEM_3D,
-  MODE_ROTATING_ITEM_3D
-};
-
-const contentArea = {
-  height: 'auto',
-  maxHeight: '15em',
-  overflowY: 'auto',
-  padding: '0.25em 1.15em',
-  cursor: 'pointer',
-  marginBottom: '1em',
-  userSelect: 'none'
-};
-
-const elementStyle = {
-  width: 'auto',
-  height: '2.5em',
-  margin: '0.25em 0.25em 0 0',
-  padding: '0.5em',
-  textAlign: 'center',
-  display: 'inline-block',
-  border: '1px solid #CCC',
-  borderRadius: '0.2em'
-};
-
-const elementSelectedStyle = {
-  ...elementStyle,
-  color: SharedStyle.SECONDARY_COLOR.main,
-  borderColor: SharedStyle.SECONDARY_COLOR.main
-};
-
-const categoryDividerStyle = {
-  paddingBottom: '0.5em',
-  borderBottom: '1px solid #888'
-};
-
-const tableSearchStyle = { width: '100%', marginTop: '0.8em' };
-const searchIconStyle = { fontSize: '1.5em' };
-const searchInputStyle = {
-  fontSize: '1em',
-  width: '100%',
-  height: '1em',
-  padding: '1em 0.5em'
-};
-
-export default class PanelLayerElement extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    let layer = props.layers.get(props.selectedLayer);
-    let elements = {
-      lines: layer.lines,
-      holes: layer.holes,
-      items: layer.items
-    };
-
-    this.state = {
-      elements,
-      matchString: '',
-      matchedElements: elements
-    };
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    if (this.state.matchString !== nextState.matchString) return true;
-
-    let oldElements = this.state.elements;
-    let newElements = nextState.elements;
-
-    if (
-      oldElements.lines.hashCode() !== newElements.lines.hashCode() ||
-      oldElements.holes.hashCode() !== newElements.holes.hashCode() ||
-      oldElements.items.hashCode() !== newElements.items.hashCode()
-    )
-      return true;
-
-    return false;
-  }
-
-  componentWillReceiveProps(nextProps) {
-    let layer = nextProps.layers.get(nextProps.selectedLayer);
-
-    if (this.props.layers.hashCode() === nextProps.layers.hashCode()) return;
-
-    let elements = {
-      lines: layer.lines,
-      holes: layer.holes,
-      items: layer.items
-    };
-
-    if (this.state.matchString !== '') {
-      let regexp = new RegExp(this.state.matchString, 'i');
-      let filterCb = el => regexp.test(el.get('name'));
-
-      this.setState({
-        matchedElements: {
-          elements,
-          lines: elements.lines.filter(filterCb),
-          holes: elements.holes.filter(filterCb),
-          items: elements.items.filter(filterCb)
-        }
-      });
-    } else {
-      this.setState({ elements, matchedElements: elements });
-    }
-  }
-
-  matcharray(text) {
-    if (text === '') {
-      this.setState({
-        matchString: '',
-        matchedElements: this.state.elements
-      });
-      return;
-    }
-
-    let regexp = new RegExp(text, 'i');
-    let filterCb = el => regexp.test(el.get('name'));
-
-    this.setState({
-      matchString: text,
-      matchedElements: {
-        lines: this.state.elements.lines.filter(filterCb),
-        holes: this.state.elements.holes.filter(filterCb),
-        items: this.state.elements.items.filter(filterCb)
-      }
-    });
-  }
-
-  render() {
-    if (!VISIBILITY_MODE[this.props.mode]) return null;
-
-    let layer = this.props.layers.get(this.props.selectedLayer);
-
-    return (
-      <Panel
-        name={this.context.translator.t('Elements on layer {0}', layer.name)}
-      >
-        <div style={contentArea} onWheel={e => e.stopPropagation()}>
-          <table style={tableSearchStyle}>
-            <tbody>
-              <tr>
-                <td>
-                  <MdSearch style={searchIconStyle} />
-                </td>
-                <td>
-                  <input
-                    type="text"
-                    style={searchInputStyle}
-                    onChange={e => {
-                      this.matcharray(e.target.value);
-                    }}
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-
-          {this.state.matchedElements.lines.count() ? (
-            <div>
-              <p style={categoryDividerStyle}>
-                {this.context.translator.t('Lines')}
-              </p>
-              {this.state.matchedElements.lines
-                .entrySeq()
-                .map(([lineID, line]) => {
-                  return (
-                    <div
-                      key={lineID}
-                      onClick={e =>
-                        this.context.linesActions.selectLine(layer.id, line.id)
-                      }
-                      style={
-                        line.selected ? elementSelectedStyle : elementStyle
-                      }
-                    >
-                      {line.name}
-                    </div>
-                  );
-                })}
-            </div>
-          ) : null}
-
-          {this.state.matchedElements.holes.count() ? (
-            <div>
-              <p style={categoryDividerStyle}>
-                {this.context.translator.t('Holes')}
-              </p>
-              {this.state.matchedElements.holes
-                .entrySeq()
-                .map(([holeID, hole]) => {
-                  return (
-                    <div
-                      key={holeID}
-                      onClick={e =>
-                        this.context.holesActions.selectHole(layer.id, hole.id)
-                      }
-                      style={
-                        hole.selected ? elementSelectedStyle : elementStyle
-                      }
-                    >
-                      {hole.name}
-                    </div>
-                  );
-                })}
-            </div>
-          ) : null}
-
-          {this.state.matchedElements.items.count() ? (
-            <div>
-              <p style={categoryDividerStyle}>
-                {this.context.translator.t('Items')}
-              </p>
-              {this.state.matchedElements.items
-                .entrySeq()
-                .map(([itemID, item]) => {
-                  return (
-                    <div
-                      key={itemID}
-                      onClick={e =>
-                        this.context.itemsActions.selectItem(layer.id, item.id)
-                      }
-                      style={
-                        item.selected ? elementSelectedStyle : elementStyle
-                      }
-                    >
-                      {item.name}
-                    </div>
-                  );
-                })}
-            </div>
-          ) : null}
-        </div>
-      </Panel>
-    );
-  }
-}
-
-PanelLayerElement.propTypes = {
-  mode: PropTypes.string.isRequired,
-  layers: PropTypes.object.isRequired
-};
-
-PanelLayerElement.contextTypes = {
-  catalog: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  projectActions: PropTypes.object.isRequired
-};

package/src/components/sidebar/panel-layers.jsx

@@ -1,381 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Map } from 'immutable';
-import Panel from './panel';
-import { TiPlus, TiDelete } from 'react-icons/ti';
-import { FaPencilAlt, FaTrash, FaEye } from 'react-icons/fa';
-import {
-  FormTextInput,
-  FormNumberInput,
-  FormSubmitButton,
-  FormSlider,
-  CancelButton
-} from '../style/export';
-
-import {
-  MODE_IDLE,
-  MODE_2D_ZOOM_IN,
-  MODE_2D_ZOOM_OUT,
-  MODE_2D_PAN,
-  MODE_3D_VIEW,
-  MODE_3D_FIRST_PERSON,
-  MODE_WAITING_DRAWING_LINE,
-  MODE_DRAWING_LINE,
-  MODE_DRAWING_HOLE,
-  MODE_DRAWING_ITEM,
-  MODE_DRAGGING_LINE,
-  MODE_DRAGGING_VERTEX,
-  MODE_DRAGGING_ITEM,
-  MODE_DRAGGING_HOLE,
-  MODE_FITTING_IMAGE,
-  MODE_UPLOADING_IMAGE,
-  MODE_ROTATING_ITEM,
-  MODE_IDLE_3D,
-  MODE_DRAGGING_ITEM_3D,
-  MODE_ROTATING_ITEM_3D
-} from '../../constants';
-import * as SharedStyle from '../../shared-style';
-
-const VISIBILITY_MODE = {
-  MODE_IDLE,
-  MODE_2D_ZOOM_IN,
-  MODE_2D_ZOOM_OUT,
-  MODE_2D_PAN,
-  MODE_3D_VIEW,
-  MODE_3D_FIRST_PERSON,
-  MODE_WAITING_DRAWING_LINE,
-  MODE_DRAWING_LINE,
-  MODE_DRAWING_HOLE,
-  MODE_DRAWING_ITEM,
-  MODE_DRAGGING_LINE,
-  MODE_DRAGGING_VERTEX,
-  MODE_DRAGGING_ITEM,
-  MODE_DRAGGING_HOLE,
-  MODE_ROTATING_ITEM,
-  MODE_UPLOADING_IMAGE,
-  MODE_FITTING_IMAGE,
-  MODE_IDLE_3D,
-  MODE_DRAGGING_ITEM_3D,
-  MODE_ROTATING_ITEM_3D
-};
-
-const styleEditButton = {
-  cursor: 'pointer',
-  marginLeft: '5px',
-  border: '0px',
-  background: 'none',
-  color: SharedStyle.COLORS.white,
-  fontSize: '14px',
-  outline: '0px'
-};
-
-const tableLayerStyle = {
-  width: '100%',
-  cursor: 'pointer',
-  overflowY: 'auto',
-  maxHeight: '20em',
-  display: 'block',
-  padding: '0 1em',
-  marginLeft: '1px'
-};
-
-const iconColStyle = { width: '2em' };
-const styleHoverColor = { color: SharedStyle.SECONDARY_COLOR.main };
-const styleEditButtonHover = { ...styleEditButton, ...styleHoverColor };
-const styleAddLabel = { fontSize: '10px', marginLeft: '5px' };
-const styleEyeVisible = { fontSize: '1.25em' };
-const styleEyeHidden = { ...styleEyeVisible, color: '#a5a1a1' };
-const firstTdStyle = { width: '6em' };
-const newLayerLableStyle = {
-  margin: '0.5em 0',
-  fontSize: '1.3em',
-  cursor: 'pointer',
-  textAlign: 'center'
-};
-const newLayerLableHoverStyle = { ...newLayerLableStyle, ...styleHoverColor };
-const layerInputTableStyle = {
-  width: '100%',
-  borderSpacing: '2px 0',
-  padding: '5px 15px'
-};
-const inputTableButtonStyle = {
-  float: 'right',
-  marginTop: '0.5em',
-  borderSpacing: '0'
-};
-
-export default class PanelLayers extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      headHovered: false,
-      layerAddUIVisible: false,
-      editingLayer: new Map()
-    };
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    if (
-      this.props.state.scene.layers.size !==
-        nextProps.state.scene.layers.size ||
-      nextState.layerAddUIVisible != this.state.layerAddUIVisible ||
-      this.state.editingLayer.hashCode() !==
-        nextState.editingLayer.hashCode() ||
-      this.props.state.sceneHistory.hashCode() !==
-        nextProps.state.sceneHistory.hashCode()
-    )
-      return true;
-
-    return false;
-  }
-
-  addLayer(e) {
-    e.stopPropagation();
-    if (!this.state.layerAddUIVisible) {
-      this.context.sceneActions.addLayer('', 0);
-      this.setState({ layerAddUIVisible: false });
-    } else this.setState({ layerAddUIVisible: !this.state.layerAddUIVisible });
-  }
-
-  resetLayerMod(e) {
-    e.stopPropagation();
-    this.setState({ layerAddUIVisible: false, editingLayer: new Map() });
-  }
-
-  updateLayer(e, layerData) {
-    e.stopPropagation();
-    let { id, name, opacity, altitude, order } = layerData.toJS();
-
-    altitude = parseInt(altitude);
-
-    this.context.sceneActions.setLayerProperties(id, {
-      name,
-      opacity,
-      altitude,
-      order
-    });
-    this.setState({ layerAddUIVisible: false, editingLayer: new Map() });
-  }
-
-  delLayer(e, layerID) {
-    e.stopPropagation();
-    this.context.sceneActions.removeLayer(layerID);
-    this.setState({ layerAddUIVisible: false, editingLayer: new Map() });
-  }
-
-  render() {
-    if (!VISIBILITY_MODE[this.props.state.mode]) return null;
-
-    let scene = this.props.state.scene;
-    let isLastLayer = scene.layers.size === 1;
-
-    return (
-      <Panel name={this.context.translator.t('Layers')}>
-        <table style={tableLayerStyle}>
-          <thead>
-            <tr>
-              <th colSpan="3"></th>
-              <th>{this.context.translator.t('Altitude')}</th>
-              <th>{this.context.translator.t('Name')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {scene.layers.entrySeq().map(([layerID, layer]) => {
-              let selectClick = e =>
-                this.context.sceneActions.selectLayer(layerID);
-              let configureClick = e =>
-                this.setState({ editingLayer: layer, layerAddUIVisible: true });
-
-              let swapVisibility = e => {
-                e.stopPropagation();
-                this.context.sceneActions.setLayerProperties(layerID, {
-                  visible: !layer.visible
-                });
-              };
-
-              let isCurrentLayer = layerID === scene.selectedLayer;
-
-              return (
-                <tr
-                  key={layerID}
-                  onClick={selectClick}
-                  onDoubleClick={configureClick}
-                  style={!isCurrentLayer ? null : styleHoverColor}
-                >
-                  <td style={iconColStyle}>
-                    {!isCurrentLayer ? (
-                      <FaEye
-                        onClick={swapVisibility}
-                        style={
-                          !layer.visible ? styleEyeHidden : styleEyeVisible
-                        }
-                      />
-                    ) : null}
-                  </td>
-                  <td style={iconColStyle}>
-                    <FaPencilAlt
-                      onClick={configureClick}
-                      style={
-                        !isCurrentLayer ? styleEditButton : styleEditButtonHover
-                      }
-                      title={this.context.translator.t('Configure layer')}
-                    />
-                  </td>
-                  <td style={iconColStyle}>
-                    {!isLastLayer ? (
-                      <FaTrash
-                        onClick={e => this.delLayer(e, layerID)}
-                        style={
-                          !isCurrentLayer
-                            ? styleEditButton
-                            : styleEditButtonHover
-                        }
-                        title={this.context.translator.t('Delete layer')}
-                      />
-                    ) : null}
-                  </td>
-                  <td style={{ width: '6em', textAlign: 'center' }}>
-                    [ h : {layer.altitude} ]
-                  </td>
-                  <td>{layer.name}</td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-        <p
-          style={
-            !this.state.headHovered
-              ? newLayerLableStyle
-              : newLayerLableHoverStyle
-          }
-          onMouseOver={() => this.setState({ headHovered: true })}
-          onMouseOut={() => this.setState({ headHovered: false })}
-          onClick={e => this.addLayer(e)}
-        >
-          {!this.state.layerAddUIVisible ? <TiPlus /> : <TiDelete />}
-          <b style={styleAddLabel}>{this.context.translator.t('New layer')}</b>
-        </p>
-
-        {this.state.layerAddUIVisible && this.state.editingLayer ? (
-          <table style={layerInputTableStyle}>
-            <tbody>
-              <tr style={{ marginTop: '1em' }}>
-                <td style={firstTdStyle}>
-                  {this.context.translator.t('Name')}:
-                </td>
-                <td>
-                  <FormTextInput
-                    value={this.state.editingLayer.get('name')}
-                    onChange={e =>
-                      this.setState({
-                        editingLayer: this.state.editingLayer.merge({
-                          name: e.target.value
-                        })
-                      })
-                    }
-                  />
-                </td>
-              </tr>
-              <tr>
-                <td style={firstTdStyle}>
-                  {this.context.translator.t('opacity')}:
-                </td>
-                <td>
-                  <FormSlider
-                    min={0}
-                    max={100}
-                    value={Math.round(
-                      this.state.editingLayer.get('opacity') * 100
-                    )}
-                    onChange={e =>
-                      this.setState({
-                        editingLayer: this.state.editingLayer.merge({
-                          opacity: e.target.value / 100
-                        })
-                      })
-                    }
-                  />
-                </td>
-              </tr>
-              <tr>
-                <td style={firstTdStyle}>
-                  {this.context.translator.t('altitude')}:
-                </td>
-                <td>
-                  <FormNumberInput
-                    value={this.state.editingLayer.get('altitude')}
-                    onChange={e =>
-                      this.setState({
-                        editingLayer: this.state.editingLayer.merge({
-                          altitude: e.target.value
-                        })
-                      })
-                    }
-                  />
-                </td>
-              </tr>
-              <tr>
-                <td style={firstTdStyle}>
-                  {this.context.translator.t('order')}:
-                </td>
-                <td>
-                  <FormNumberInput
-                    value={this.state.editingLayer.get('order')}
-                    onChange={e =>
-                      this.setState({
-                        editingLayer: this.state.editingLayer.merge({
-                          order: e.target.value
-                        })
-                      })
-                    }
-                  />
-                </td>
-              </tr>
-              <tr>
-                <td colSpan="2">
-                  <table style={inputTableButtonStyle}>
-                    <tbody>
-                      <tr>
-                        <td>
-                          <CancelButton
-                            size="small"
-                            onClick={e => {
-                              this.resetLayerMod(e);
-                            }}
-                          >
-                            {this.context.translator.t('Reset')}
-                          </CancelButton>
-                        </td>
-                        <td>
-                          <FormSubmitButton
-                            size="small"
-                            onClick={e => {
-                              this.updateLayer(e, this.state.editingLayer);
-                            }}
-                          >
-                            {this.context.translator.t('Save')}
-                          </FormSubmitButton>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        ) : null}
-      </Panel>
-    );
-  }
-}
-
-PanelLayers.propTypes = {
-  state: PropTypes.object.isRequired
-};
-
-PanelLayers.contextTypes = {
-  sceneActions: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired
-};