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

package/src/class/vertex.js

@@ -0,0 +1,409 @@
+import { Map, List } from 'immutable';
+import { Vertex as VertexModel } from '../models';
+import {
+  IDBroker,
+  GeometryUtils,
+  SnapSceneUtils,
+  SnapUtils
+} from '../utils/export';
+import { MODE_DRAGGING_VERTEX, MODE_IDLE } from '../constants';
+import { Layer, Line, Group } from '../class/export';
+import { isEmpty } from '../../src/utils/helper';
+
+class Vertex {
+  static add(state, layerID, x, y, relatedPrototype, relatedID) {
+    let vertex = state
+      .getIn(['scene', 'layers', layerID, 'vertices'])
+      .find(vertex => GeometryUtils.samePoints(vertex, { x, y }));
+    if (vertex) {
+      vertex = vertex.update(relatedPrototype, related =>
+        related.push(relatedID)
+      );
+    } else {
+      vertex = new VertexModel({
+        id: IDBroker.acquireID(),
+        name: 'Vertex',
+        x,
+        y,
+        [relatedPrototype]: new List([relatedID])
+      });
+    }
+
+    state = state.setIn(
+      ['scene', 'layers', layerID, 'vertices', vertex.id],
+      vertex
+    );
+
+    return { updatedState: state, vertex };
+  }
+
+  static setAttributes(state, layerID, vertexID, vertexAttributes) {
+    state = state.mergeIn(
+      ['scene', 'layers', layerID, 'vertices', vertexID],
+      vertexAttributes
+    );
+
+    return { updatedState: state };
+  }
+
+  static addElement(state, layerID, vertexID, elementPrototype, elementID) {
+    state = state.updateIn(
+      ['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype],
+      list => list.push(elementID)
+    );
+    return { updatedState: state };
+  }
+
+  static removeElement(state, layerID, vertexID, elementPrototype, elementID) {
+    let elementIndex = state
+      .getIn([
+        'scene',
+        'layers',
+        layerID,
+        'vertices',
+        vertexID,
+        elementPrototype
+      ])
+      .findIndex(el => el === elementID);
+    if (elementIndex !== -1) {
+      state = state.updateIn(
+        ['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype],
+        list => list.remove(elementIndex)
+      );
+    }
+    return { updatedState: state };
+  }
+
+  static select(state, layerID, vertexID) {
+    state = state.setIn(
+      ['scene', 'layers', layerID, 'vertices', vertexID, 'selected'],
+      true
+    );
+    state = state.updateIn(
+      ['scene', 'layers', layerID, 'selected', 'vertices'],
+      elems => elems.push(vertexID)
+    );
+
+    return { updatedState: state };
+  }
+
+  static unselect(state, layerID, vertexID) {
+    state = state.setIn(
+      ['scene', 'layers', layerID, 'vertices', vertexID, 'selected'],
+      false
+    );
+    state = state.updateIn(
+      ['scene', 'layers', layerID, 'selected', 'vertices'],
+      elems => elems.filter(el => el.id !== vertexID)
+    );
+
+    return { updatedState: state };
+  }
+
+  static remove(
+    state,
+    layerID,
+    vertexID,
+    relatedPrototype,
+    relatedID,
+    forceRemove
+  ) {
+    let vertex = state.getIn([
+      'scene',
+      'layers',
+      layerID,
+      'vertices',
+      vertexID
+    ]);
+    if (vertex) {
+      if (relatedPrototype && relatedID)
+        vertex = vertex.update(relatedPrototype, related => {
+          let index = related.findIndex(ID => relatedID === ID);
+          return related.delete(index);
+        });
+      let inUse = vertex.areas.size || vertex.lines.size;
+
+      if (inUse && !forceRemove) {
+        state = state.setIn(
+          ['scene', 'layers', layerID, 'vertices', vertexID],
+          vertex
+        );
+      } else {
+        state = state.deleteIn([
+          'scene',
+          'layers',
+          layerID,
+          'vertices',
+          vertexID
+        ]);
+      }
+    }
+
+    return { updatedState: state };
+  }
+
+  static beginDraggingVertex(state, layerID, vertexID, x, y) {
+    let snapElements = SnapSceneUtils.sceneSnapElements(
+      state.scene,
+      new List(),
+      state.snapMask
+    );
+
+    state = state.merge({
+      mode: MODE_DRAGGING_VERTEX,
+      snapElements,
+      draggingSupport: Map({
+        layerID,
+        vertexID,
+        previousMode: state.get('mode')
+      })
+    });
+
+    return { updatedState: state };
+  }
+
+  static updateDraggingVertex(state, x, y) {
+    let { draggingSupport, snapElements, scene } = state;
+
+    let snap = null;
+    if (state.snapMask && !state.snapMask.isEmpty()) {
+      snap = SnapUtils.nearestSnap(snapElements, x, y, state.snapMask);
+      if (snap) ({ x, y } = snap.point);
+    }
+
+    let layerID = draggingSupport.get('layerID');
+    let vertexID = draggingSupport.get('vertexID');
+    state = state.merge({
+      activeSnapElement: snap ? snap.snap : null,
+      scene: scene.mergeIn(['layers', layerID, 'vertices', vertexID], { x, y })
+    });
+
+    return { updatedState: state };
+  }
+
+  static endDraggingVertex(state, x, y) {
+    let { draggingSupport } = state;
+    let layerID = draggingSupport.get('layerID');
+    let lineID = state
+      .getIn(['scene', 'layers', layerID, 'selected', 'lines'])
+      .first();
+    let line = state.getIn(['scene', 'layers', layerID, 'lines', lineID]);
+    let vertexID = draggingSupport.get('vertexID');
+    // let vertexGroup = [vertexID];
+    let lines = state.getIn([
+      'scene',
+      'layers',
+      layerID,
+      'vertices',
+      vertexID,
+      'lines'
+    ]);
+
+    if (lines) {
+      state = lines.reduce((reducedState, lineID) => {
+        if (!reducedState.getIn(['scene', 'layers', layerID, 'lines', lineID]))
+          return reducedState;
+
+        let v_id0 = reducedState.getIn([
+          'scene',
+          'layers',
+          layerID,
+          'lines',
+          lineID,
+          'vertices',
+          0
+        ]);
+        let v_id1 = reducedState.getIn([
+          'scene',
+          'layers',
+          layerID,
+          'lines',
+          lineID,
+          'vertices',
+          1
+        ]);
+        let oldVertexID = v_id0 === vertexID ? v_id1 : v_id0;
+        let v0 = reducedState.getIn([
+          'scene',
+          'layers',
+          layerID,
+          'vertices',
+          v_id0
+        ]);
+        let v1 = reducedState.getIn([
+          'scene',
+          'layers',
+          layerID,
+          'vertices',
+          v_id1
+        ]);
+
+        let oldVertex = reducedState.getIn([
+          'scene',
+          'layers',
+          layerID,
+          'vertices',
+          oldVertexID
+        ]);
+        let vertex = reducedState.getIn([
+          'scene',
+          'layers',
+          layerID,
+          'vertices',
+          vertexID
+        ]);
+
+        let oldHoles = [];
+
+        let orderedVertices = GeometryUtils.orderVertices([oldVertex, vertex]);
+
+        let holes = reducedState
+          .getIn(['scene', 'layers', layerID, 'lines', lineID, 'holes'])
+          .forEach(holeID => {
+            let hole = reducedState.getIn([
+              'scene',
+              'layers',
+              layerID,
+              'holes',
+              holeID
+            ]);
+            let oldLineLength = GeometryUtils.pointsDistance(
+              oldVertex.x,
+              oldVertex.y,
+              vertex.x,
+              vertex.y
+            );
+            let offset = hole.offset;
+            let offsetPosition = GeometryUtils.extendLine(
+              oldVertex.x,
+              oldVertex.y,
+              vertex.x,
+              vertex.y,
+              oldLineLength * offset
+            );
+
+            oldHoles.push({ hole, offsetPosition });
+          });
+
+        let lineType = reducedState.getIn([
+          'scene',
+          'layers',
+          layerID,
+          'lines',
+          lineID,
+          'type'
+        ]);
+        let lineProps = reducedState.getIn([
+          'scene',
+          'layers',
+          layerID,
+          'lines',
+          lineID,
+          'properties'
+        ]);
+        let lineGroups = reducedState //get groups membership if present
+          .getIn(['scene', 'groups'])
+          .filter(group => {
+            const lines = group.getIn(['elements', layerID, 'lines']);
+            return lines && lines.contains(lineID);
+          });
+
+        reducedState = Layer.removeZeroLengthLines(
+          reducedState,
+          layerID
+        ).updatedState;
+        reducedState = Layer.mergeEqualsVertices(
+          reducedState,
+          layerID,
+          vertexID
+        ).updatedState;
+        reducedState = Line.remove(reducedState, layerID, lineID).updatedState;
+
+        if (!GeometryUtils.samePoints(oldVertex, vertex)) {
+          let ret = Line.createAvoidingIntersections(
+            reducedState,
+            layerID,
+            lineType,
+            // oldVertex.x,
+            // oldVertex.y,
+            // vertex.x,
+            // vertex.y,
+            v0.x,
+            v0.y,
+            v1.x,
+            v1.y,
+            lineProps,
+            oldHoles
+          );
+
+          reducedState = ret.updatedState;
+
+          //re-add to old line's groups if present
+          ret.lines.forEach(addedLine => {
+            lineGroups.forEach(oldLineGroup => {
+              reducedState = Group.addElement(
+                reducedState,
+                oldLineGroup.id,
+                layerID,
+                'lines',
+                addedLine.id
+              ).updatedState;
+            });
+          });
+        }
+
+        return reducedState;
+      }, state);
+    }
+
+    /// 108 merg lines - start ////////
+    let colinearLines = state.getIn([
+      'scene',
+      'layers',
+      layerID,
+      'vertices',
+      vertexID,
+      'lines'
+    ]);
+    let vertexGroup = [vertexID];
+
+    if (!isEmpty(colinearLines)) {
+      colinearLines.forEach(lineID => {
+        let line = state.getIn(['scene', 'layers', layerID, 'lines', lineID]);
+
+        line.vertices.forEach(vertex => {
+          if (vertex !== vertexID) vertexGroup.push(vertex);
+        });
+      });
+
+      vertexGroup.forEach(vertexId => {
+        let lineGroup = [];
+
+        lineGroup = Line.hasColinearTwoLines(state, vertexId, layerID);
+        if (!isEmpty(lineGroup)) {
+          state = Line.mergeTwoColinearLines(
+            state,
+            lineGroup[0],
+            lineGroup[1],
+            layerID,
+            line.properties
+          ).updatedState;
+        }
+      });
+    }
+    /// 108 merg lines - end ////////
+
+    state = Layer.detectAndUpdateAreas(state, layerID, {}).updatedState;
+
+    state = state.merge({
+      mode: draggingSupport.get('previousMode'),
+      draggingSupport: null,
+      activeSnapElement: null,
+      snapElements: new List()
+    });
+
+    return { updatedState: state };
+  }
+}
+
+export { Vertex as default };

package/src/components/atoms/Snackbar/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+import { SnackbarContent } from '@material-ui/core/index';
+import Slide from '@material-ui/core/Slide';
+import { TEXT_COLOR_NEUTRAL_0 } from '../../../constants';
+
+const SnackBar = ({
+  message,
+  isOpen = false,
+  autoHideDuration = !!autoHideDuration ? autoHideDuration : 5000,
+  action = '',
+  handleClose,
+  snackBarColor = TEXT_COLOR_NEUTRAL_0,
+  style
+}) => {
+  return (
+    <Snackbar
+      style={style}
+      open={isOpen}
+      autoHideDuration={autoHideDuration}
+      handleClose={handleClose}
+      anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
+      TransitionComponent={Slide}
+      onClose={handleClose}
+    >
+      <SnackbarContent
+        style={{ backgroundColor: snackBarColor }}
+        action={
+          action || (
+            <img
+              onClick={handleClose}
+              style={{ float: 'right', height: 24, cursor: 'pointer' }}
+              src="/assets/img/svg/close.svg"
+            />
+          )
+        }
+        message={<div dangerouslySetInnerHTML={{ __html: message }} />}
+      />
+    </Snackbar>
+  );
+};
+
+export default SnackBar;

package/src/components/atoms/radio-button/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { RadioWrapper } from './styles';
+
+const RadioButton = ({ label, checked = false, name, value, id, onChange }) => {
+  return (
+    <RadioWrapper onClick={() => onChange(value)}>
+      <input
+        type="radio"
+        id={id}
+        name={name}
+        defaultChecked={checked}
+        value={value}
+      />
+      <label htmlFor={id}>{label}</label>
+    </RadioWrapper>
+  );
+};
+
+export default RadioButton;

package/src/components/atoms/radio-button/styles.js

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+
+export const RadioWrapper = styled.div`
+  display: inline-block;
+  color: #fff;
+  margin-right: 10px;
+
+  [type='radio']:checked,
+  [type='radio']:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+  [type='radio']:checked + label,
+  [type='radio']:not(:checked) + label {
+    position: relative;
+    padding-left: 28px;
+    cursor: pointer;
+    line-height: 20px;
+    display: inline-block;
+  }
+  [type='radio']:checked + label:before,
+  [type='radio']:not(:checked) + label:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 18px;
+    height: 18px;
+    border: 1px solid #ddd;
+    border-radius: 100%;
+    background: #fff;
+  }
+  [type='radio']:checked + label:after,
+  [type='radio']:not(:checked) + label:after {
+    content: '';
+    width: 12px;
+    height: 12px;
+    background: #000;
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    border-radius: 100%;
+    -webkit-transition: all 0.2s ease;
+    transition: all 0.2s ease;
+  }
+  [type='radio']:not(:checked) + label:after {
+    opacity: 0;
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  }
+  [type='radio']:checked + label:after {
+    opacity: 1;
+    -webkit-transform: scale(1);
+    transform: scale(1);
+  }
+`;

package/src/components/button/MainButton.jsx

@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import {
+  BG_COLOR_0,
+  BG_COLOR_1,
+  BG_COLOR_HOVER,
+  DEFAULT_FONT_FAMILY,
+  PRIMARY_GREEN_COLOR,
+  SECONDARY_PURPLE_COLOR,
+  SHADE_DARK_GREEN_COLOR,
+  SHADE_DARK_PURPLE_COLOR,
+  SHADE_LIGHT_GREEN_COLOR,
+  SHADE_LIGHT_PURPLE_COLOR,
+  TEXT_COLOR_NEUTRAL_4
+} from '../../constants';
+
+/*
+  variant: primary, secondary, tertiary(default), icon, close, pagenumber;
+  size: large, small(default);
+  disabled: true, false(default);
+  text: user definition;
+  icon: user definition;
+  endIcon: user definition;
+  onClick: user definition;
+  buttonStyle: user definition;
+  textStyle: user definition;
+  imgStyle: userdefinition;
+*/
+
+export default class MainButton extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    const { variant, text, size, icon, endIcon, disabled } = this.props;
+    let padding = '10px 20px';
+
+    if (size === 'large') {
+      if (variant === 'icon' || variant === 'pagenumber') padding = '10px';
+    } else {
+      if (variant === 'icon' || variant === 'pagenumber') padding = '5px';
+      else padding = '5px 10px';
+    }
+
+    const StyledButton = styled.button`
+      /* width: max-content; */
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: ${padding};
+      border: ${variant === 'primary' ? '0px solid' : '1px solid'};
+      cursor: ${disabled ? 'no-drop' : 'pointer'};
+      user-select: none;
+      background-color: ${variant === 'primary'
+        ? SECONDARY_PURPLE_COLOR
+        : BG_COLOR_1};
+      border-color: ${variant === 'primary' || variant === 'secondary'
+        ? SECONDARY_PURPLE_COLOR
+        : BG_COLOR_1};
+      border-radius: ${variant === 'icon' ? '50%' : '5px'};
+      outline: 0;
+      height: ${size === 'large' ? '40px' : '35px'};
+      width: ${variant === 'icon' || variant === 'pagenumber'
+        ? size === 'large'
+          ? '40px'
+          : '35px'
+        : 'max-content'};
+      :focus {
+        box-shadow: ${!disabled &&
+        `0px 0px 5px 2px ${SHADE_LIGHT_PURPLE_COLOR}`};
+      }
+      :hover {
+        background-color: ${!disabled &&
+        (variant === 'primary' ? SHADE_LIGHT_PURPLE_COLOR : BG_COLOR_0)};
+      }
+      :active {
+        background-color: ${!disabled &&
+        (variant === 'primary' ? SHADE_DARK_PURPLE_COLOR : BG_COLOR_0)};
+      }
+    `;
+
+    const StyledLabel = styled.span`
+      color: ${disabled
+        ? TEXT_COLOR_NEUTRAL_4
+        : variant === 'primary'
+        ? BG_COLOR_1
+        : SECONDARY_PURPLE_COLOR};
+      font-family: ${DEFAULT_FONT_FAMILY};
+      font-size: 13px;
+      font-weight: 600;
+      line-height: 18px;
+      text-align: center;
+    `;
+
+    const StyledImage = styled.img`
+      height: ${size === 'large' ? '20px' : '15px'};
+      width: ${size === 'large' ? '20px' : '15px'};
+      background-color: ${disabled
+        ? TEXT_COLOR_NEUTRAL_4
+        : variant !== 'primary'
+        ? SECONDARY_PURPLE_COLOR
+        : BG_COLOR_1};
+      -webkit-mask-image: url(${props => props.maskImage + '?nocache=2025'});
+      -webkit-mask-size: 90%;
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-position: center;
+    `;
+
+    if (variant === 'icon' && text)
+      console.log('If your variant is icon, you cannnot use text');
+    if (variant === 'icon' && endIcon)
+      console.log('If your variant is icon, you cannnot use endIcon');
+    if (variant === 'icon' && (icon || endIcon))
+      console.log(
+        'If your variant is pagenumber, you cannnot use icon or endIcon'
+      );
+    if (variant === 'close' && icon)
+      console.log('If your variant is close, you cannnot use icon');
+
+    return (
+      <StyledButton
+        onClick={!disabled && this.props.onClick}
+        style={{ ...this.props.buttonStyle }}
+      >
+        {variant !== 'pagenumber' && variant !== 'close' && icon && (
+          <StyledImage
+            style={{
+              ...this.props.imgStyle,
+              marginRight: variant !== 'icon' && 10
+            }}
+            maskImage={icon}
+          />
+        )}
+        {variant !== 'icon' && (
+          <StyledLabel style={{ ...this.props.textStyle }}>
+            {variant === 'pagenumber'
+              ? parseInt(text)
+                ? parseInt(text)
+                : 0
+              : text}
+          </StyledLabel>
+        )}
+        {variant !== 'pagenumber' && variant !== 'icon' && endIcon && (
+          <StyledImage style={{ marginLeft: 10 }} maskImage={endIcon} />
+        )}
+      </StyledButton>
+    );
+  }
+}
+
+MainButton.propTypes = {
+  variant: PropTypes.string.isRequired,
+  size: PropTypes.string.isRequired,
+  onClick: PropTypes.func
+};