kitchen-simulator 5.0.0-test.7 → 5.0.0-test.8

package/src/components/sidebar/panel-element-editor/panel-element-editor.jsx

@@ -1,104 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Panel from '../panel';
-import { Seq } from 'immutable';
-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,
-  MODE_DRAWING_HOLE_3D,
-  MODE_DRAGGING_HOLE_3D
-} from '../../../constants';
-import ElementEditor from './element-editor';
-
-export default function PanelElementEditor(
-  { state, planData, categoryData, getLinearOfMolding },
-  { projectActions, translator }
-) {
-  let { scene, mode } = state;
-
-  if (
-    ![
-      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,
-      MODE_DRAWING_HOLE_3D,
-      MODE_DRAGGING_HOLE_3D
-    ].includes(mode)
-  )
-    return null;
-
-  let componentRenderer = (element, layer) => (
-    <Panel
-      isUrl={false}
-      key={element.id}
-      name={translator.t('Properties: [{0}] {1}', element.type, element.id)}
-      opened={true}
-    >
-      {/* <div style={{padding: '5px 15px'}}> */}
-
-      <ElementEditor
-        element={element}
-        layer={layer}
-        state={state}
-        planData={planData}
-        categoryData={categoryData}
-        getLinearOfMolding={getLinearOfMolding}
-      />
-      {/* </div> */}
-    </Panel>
-  );
-
-  let layerRenderer = layer =>
-    Seq()
-      .concat(layer.lines, layer.holes, layer.areas, layer.items)
-      .filter(element => element.selected)
-      .map(element => componentRenderer(element, layer))
-      .valueSeq();
-
-  return <div>{scene.layers.valueSeq().map(layerRenderer)}</div>;
-}
-
-PanelElementEditor.propTypes = {
-  state: PropTypes.object.isRequired,
-  planData: PropTypes.object.isRequired
-};
-
-PanelElementEditor.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired
-};

package/src/components/sidebar/panel-element-editor/panel-multi-elements-editor.jsx

@@ -1,155 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Panel from '../panel';
-import { Seq } from 'immutable';
-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
-} from '../../../constants';
-import { FormSelect } from '../../../components/style/export';
-import { Group } from '../../../class/export';
-
-const tableStyle = { width: '100%' };
-const firstTdStyle = { width: '6em' };
-
-export default class PanelMultiElementsEditor extends Component {
-  //export default function PanelMultiElementsEditor({state}, {projectActions, translator}) {
-  constructor(props, context) {
-    super(props, context);
-
-    this.state = {
-      selectedGroupID: ''
-    };
-  }
-
-  addSelectToGroup(state, groupID, layerID, selecteds) {
-    if (!groupID || groupID === '' || !selecteds || !selecteds.size) return;
-
-    console.log('need to be added to group', groupID, 'elements', selecteds);
-
-    /*let selectedJs = selecteds.toJS();
-
-    for( let lineID in selectedJs.lines ) Group.addElement( state, groupID, layerID, 'lines', lineID );*/
-  }
-
-  render() {
-    let { mode } = this.props.state;
-
-    if (
-      ![
-        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
-      ].includes(mode)
-    )
-      return null;
-
-    let groups = this.props.state.getIn(['scene', 'groups']);
-
-    //TODO change in multi-layer check
-    let selectedLayer = this.props.state.getIn(['scene', 'selectedLayer']);
-    let selecteds = this.props.state.getIn([
-      'scene',
-      'layers',
-      selectedLayer,
-      'selected'
-    ]);
-
-    return (
-      <Panel name={'Multiselected'} opened={true}>
-        <div style={{ padding: '5px 15px' }}>
-          <p>Multiselection tab</p>
-          <table style={tableStyle}>
-            <tbody>
-              <tr>
-                <td style={firstTdStyle}>Add to Group</td>
-                <td>
-                  <FormSelect
-                    value={this.state.selectedGroupID}
-                    onChange={e =>
-                      this.setState({ selectedGroupID: e.target.value })
-                    }
-                  >
-                    <option key={0} value={''}></option>
-                    {groups.entrySeq().map(([groupID, group]) => (
-                      <option key={groupID} value={groupID}>
-                        {group.get('name')}
-                      </option>
-                    ))}
-                  </FormSelect>
-                </td>
-                <td
-                  style={{
-                    cursor: 'pointer',
-                    padding: '0.5em 0',
-                    textAlign: 'center'
-                  }}
-                  onClick={e => {
-                    if (
-                      !this.state.selectedGroupID ||
-                      this.state.selectedGroupID === '' ||
-                      !selecteds ||
-                      !selecteds.size
-                    )
-                      return;
-
-                    let selectedJs = selecteds.toJS();
-
-                    for (let x = 0; x < selectedJs.lines.length; x++)
-                      this.context.groupsActions.addToGroup(
-                        this.state.selectedGroupID,
-                        selectedLayer,
-                        'lines',
-                        selectedJs.lines[x]
-                      );
-                  }}
-                >
-                  +
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </Panel>
-    );
-  }
-}
-
-PanelMultiElementsEditor.propTypes = {
-  state: PropTypes.object.isRequired
-};
-
-PanelMultiElementsEditor.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  groupsActions: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired
-};

package/src/components/sidebar/panel-group-editor.jsx

@@ -1,272 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Panel from './panel';
-import * as SharedStyle from '../../shared-style';
-import { FormNumberInput, FormTextInput } from '../style/export';
-import { Map } from 'immutable';
-
-import { FaUnlink } from 'react-icons/fa';
-
-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';
-
-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 tableStyle = { width: '100%' };
-const firstTdStyle = { width: '6em' };
-const inputStyle = { textAlign: 'left' };
-const styleEditButton = {
-  marginLeft: '5px',
-  border: '0px',
-  background: 'none',
-  color: SharedStyle.COLORS.white,
-  fontSize: '14px',
-  outline: '0px'
-};
-
-const tablegroupStyle = {
-  width: '100%',
-  cursor: 'pointer',
-  maxHeight: '20em',
-  marginLeft: '1px',
-  marginTop: '1em'
-};
-
-const iconColStyle = { width: '2em' };
-
-export default class PanelGroupEditor extends Component {
-  constructor(props, context) {
-    super(props, context);
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return true;
-  }
-
-  componentWillReceiveProps(nextProps, nextContext) {}
-
-  render() {
-    if (!this.props.groupID || !VISIBILITY_MODE[this.props.state.mode])
-      return null;
-
-    let group = this.props.state.getIn(['scene', 'groups', this.props.groupID]);
-    let elements = group.get('elements');
-
-    return (
-      <Panel
-        name={this.context.translator.t('Group [{0}]', group.get('name'))}
-        opened={true}
-      >
-        <div style={{ padding: '5px 15px' }}>
-          <table style={tableStyle}>
-            <tbody>
-              <tr>
-                <td style={firstTdStyle}>
-                  {this.context.translator.t('Name')}
-                </td>
-                <td>
-                  <FormTextInput
-                    value={group.get('name')}
-                    onChange={e =>
-                      this.context.groupsActions.setGroupAttributes(
-                        this.props.groupID,
-                        new Map({ name: e.target.value })
-                      )
-                    }
-                    style={inputStyle}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <td style={firstTdStyle}>X</td>
-                <td>
-                  <FormNumberInput
-                    value={group.get('x')}
-                    onChange={e =>
-                      this.context.groupsActions.groupTranslate(
-                        this.props.groupID,
-                        e.target.value,
-                        group.get('y')
-                      )
-                    }
-                    style={inputStyle}
-                    state={this.props.state}
-                    precision={2}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <td style={firstTdStyle}>Y</td>
-                <td>
-                  <FormNumberInput
-                    value={group.get('y')}
-                    onChange={e =>
-                      this.context.groupsActions.groupTranslate(
-                        this.props.groupID,
-                        group.get('x'),
-                        e.target.value
-                      )
-                    }
-                    style={inputStyle}
-                    state={this.props.state}
-                    precision={2}
-                  />
-                </td>
-              </tr>
-              <tr>
-                <td style={firstTdStyle}>
-                  {this.context.translator.t('Rotation')}
-                </td>
-                <td>
-                  <FormNumberInput
-                    value={group.get('rotation')}
-                    onChange={e =>
-                      this.context.groupsActions.groupRotate(
-                        this.props.groupID,
-                        e.target.value
-                      )
-                    }
-                    style={inputStyle}
-                    state={this.props.state}
-                    precision={2}
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          {elements.size ? (
-            <div>
-              <p
-                style={{
-                  textAlign: 'center',
-                  borderBottom: SharedStyle.PRIMARY_COLOR.border,
-                  paddingBottom: '1em'
-                }}
-              >
-                {this.context.translator.t("Group's Elements")}
-              </p>
-              <table style={tablegroupStyle}>
-                <thead>
-                  <tr>
-                    <th style={iconColStyle}></th>
-                    <th>{this.context.translator.t('Layer')}</th>
-                    <th>{this.context.translator.t('Prototype')}</th>
-                    <th>{this.context.translator.t('Name')}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {elements.entrySeq().map(([layerID, layerElements]) => {
-                    return layerElements
-                      .entrySeq()
-                      .map(([elementPrototype, ElementList]) => {
-                        return ElementList.valueSeq().map(elementID => {
-                          let element = this.props.state.getIn([
-                            'scene',
-                            'layers',
-                            layerID,
-                            elementPrototype,
-                            elementID
-                          ]);
-
-                          return (
-                            <tr key={elementID}>
-                              <td
-                                style={iconColStyle}
-                                title={this.context.translator.t(
-                                  'Un-chain Element from Group'
-                                )}
-                              >
-                                <FaUnlink
-                                  onClick={e =>
-                                    this.context.groupsActions.removeFromGroup(
-                                      this.props.groupID,
-                                      layerID,
-                                      elementPrototype,
-                                      elementID
-                                    )
-                                  }
-                                  style={styleEditButton}
-                                />
-                              </td>
-                              <td style={{ textAlign: 'center' }}>{layerID}</td>
-                              <td
-                                style={{
-                                  textAlign: 'center',
-                                  textTransform: 'capitalize'
-                                }}
-                              >
-                                {elementPrototype}
-                              </td>
-                              <td style={{ textAlign: 'center' }}>
-                                {element.name}
-                              </td>
-                            </tr>
-                          );
-                        });
-                      });
-                  })}
-                </tbody>
-              </table>
-            </div>
-          ) : null}
-        </div>
-      </Panel>
-    );
-  }
-}
-
-PanelGroupEditor.propTypes = {
-  state: PropTypes.object.isRequired,
-  groupID: PropTypes.string
-};
-
-PanelGroupEditor.contextTypes = {
-  catalog: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  groupsActions: PropTypes.object.isRequired,
-  projectActions: PropTypes.object.isRequired
-};