kitchen-simulator 5.0.0-test.18 → 5.0.0-test.19

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

@@ -0,0 +1,104 @@
+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

@@ -0,0 +1,155 @@
+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

@@ -0,0 +1,272 @@
+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
+};