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

package/src/components/viewer2d/ruler.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import convert from 'convert-units';
+import IDBroker from '../../utils/id-broker';
+import { FormNumberInput2 } from '../style/export';
+import {
+  LINE_THICKNESS,
+  SHADE_LIGHT_BLUE_COLOR,
+  TEXT_COLOR_NEUTRAL_7
+} from '../../constants';
+
+const STYLE = {
+  stroke: TEXT_COLOR_NEUTRAL_7,
+  strokeWidth: '1px'
+};
+
+const BACKGROUNDSTYLE = {
+  fill: 'transparent',
+  fillOpacity: 0.8
+};
+
+const STYLE_TEXT = {
+  textAnchor: 'middle',
+  fontSize: '12px',
+  pointerEvents: 'none',
+
+  //http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css
+  WebkitTouchCallout: 'none' /* iOS Safari */,
+  WebkitUserSelect: 'none' /* Chrome/Safari/Opera */,
+  MozUserSelect: 'none' /* Firefox */,
+  MsUserSelect: 'none' /* Internet Explorer/Edge */,
+  userSelect: 'none'
+};
+
+export default function Ruler({
+  layer,
+  length,
+  unit,
+  rulerUnit,
+  transform,
+  flag
+}) {
+  let update = (lengthInput, unitInput, type) => {
+    let newLength = toFixedFloat(lengthInput);
+    let merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        _length: newLength,
+        length: convert(newLength).from(unitInput).to('cm')
+      });
+    } else {
+      merged = value.merge({
+        _length: convert(newLength).from(UNIT_INCH).to(unitInput),
+        _unit: unitInput
+      });
+    }
+    // if (hook) {
+    //   return hook(merged, sourceElement, internalState, state).then(val => {
+    //     return onUpdate(val);
+    //   });
+    // }
+    // return onUpdate(merged);
+  };
+  // let _unit = "in";
+  // let distanceText = convert(length).from(unit).to(rulerUnit);
+  let distanceText = convert(length).from(unit).to(rulerUnit).toFixed(0);
+  const thickness = convert(LINE_THICKNESS).from(unit).to(rulerUnit).toFixed(0);
+  // let _ft_len = convert(_length).from('in').to('ft');
+  // let _ft_val = Math.floor(_ft_len); _ft_len -= _ft_val;
+  // let _in_val = convert(_ft_len).from('ft').to('in').toFixed(0);
+  // let distanceText = `${_ft_val}'${_in_val}"`;
+  let textLength = (distanceText.length + layer.unit.length) * 18;
+  return (
+    <g transform={transform}>
+      <g id="ruler">
+        <rect
+          id={`ruler_rect_${IDBroker.acquireID()}`}
+          style={BACKGROUNDSTYLE}
+          x={length / 2 - textLength / 2}
+          y="-10"
+          width={textLength}
+          height="22"
+          rx="1"
+          ry="0.39"
+        />
+        <text
+          x={length / 2}
+          y="3"
+          transform={`scale(1, -1)`}
+          style={STYLE_TEXT}
+          fill={TEXT_COLOR_NEUTRAL_7}
+        >
+          {Math.round(convert(distanceText).from('in').to(layer.unit) * 100) /
+            100}
+          {layer.unit === 'in' ? '"' : layer.unit}
+        </text>
+        {/* <FormNumberInput2
+          value={distanceText}
+          onChange={event => update(event.target.value, _unit, 0)}
+          style={{
+            width: textLength,
+          }}
+          precision={2}
+        /> */}
+      </g>
+      {/* <line x1="-4" y1="-4" x2="4" y2="4" style={STYLE} /> */}
+      {/* <line x1={length - 4} y1="-4" x2={length + 4} y2="4" style={STYLE} /> */}
+      <line
+        x1="0"
+        y1="0"
+        x2={(length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2}
+        y2="0"
+        style={STYLE}
+      />
+      <line
+        x1={
+          (length + textLength) / 2 < 0
+            ? 0
+            : (length + textLength) / 2 < length
+              ? (length + textLength) / 2
+              : length
+        }
+        y1="0"
+        x2={length}
+        y2="0"
+        style={STYLE}
+      />
+    </g>
+  );
+}
+
+Ruler.propTypes = {
+  length: PropTypes.number.isRequired,
+  unit: PropTypes.string.isRequired,
+  transform: PropTypes.string.isRequired
+};

package/src/components/viewer2d/rulerDist.jsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import convert from 'convert-units';
+
+const ARROW_STYLE = {
+  stroke: '#1183B7',
+  strokeWidth: '2px',
+  strokeLinecap: 'round'
+};
+
+const STYLE = {
+  stroke: 'black',
+  strokeWidth: '1.1px'
+};
+
+const STYLE_TEXT = {
+  textAnchor: 'middle',
+  fontSize: '10px',
+  pointerEvents: 'none',
+
+  //http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css
+  WebkitTouchCallout: 'none' /* iOS Safari */,
+  WebkitUserSelect: 'none' /* Chrome/Safari/Opera */,
+  MozUserSelect: 'none' /* Firefox */,
+  MsUserSelect: 'none' /* Internet Explorer/Edge */,
+  userSelect: 'none'
+};
+
+export default function RulerDist({
+  layer,
+  length,
+  unit,
+  rulerUnit,
+  transform,
+  angle,
+  rotation
+}) {
+  let _unit = 'in';
+  // let _length = convert(length).from(unit).to(rulerUnit);
+  let distanceText = `${convert(length).from('cm').to(rulerUnit).toFixed(0)}`;
+  let textLength = (distanceText.length + layer.unit.length) * 18;
+  let textangle = angle + 90;
+  let textRotation = 1;
+  let ay = 2;
+  let ep = Math.sin((textangle * Math.PI) / 180);
+  let es = Math.sin((angle * Math.PI) / 180);
+
+  if (rotation === 180 && ep >= 0) {
+    textRotation = 180;
+    ay = 5;
+  } else if (rotation === 180 && ep <= 0) {
+    textRotation = 0;
+    ay = -3;
+  } else if (rotation === 0 && ep >= 0) {
+    textRotation = 0;
+    ay = -3;
+  } else if (rotation === 0 && ep <= 0) {
+    textRotation = 180;
+    ay = 5;
+  }
+  if (rotation === 90 && es >= 0) {
+    textRotation = 180;
+    ay = 5;
+  } else if (rotation === 90 && es <= 0) {
+    textRotation = 0;
+    ay = -3;
+  } else if (rotation === -90 && es >= 0) {
+    textRotation = 0;
+    ay = -3;
+  } else if (rotation === -90 && es <= 0) {
+    textRotation = 180;
+    ay = 5;
+  }
+  if (Math.abs(length - textLength) / 2 <= 16) {
+    let dy = textRotation == 0 ? 15 : -15;
+    return (
+      <g transform={transform}>
+        <g transform={`translate(0, ${dy})`}>
+          <text
+            x="0"
+            y="0"
+            transform={`translate(${
+              length / 2
+            },${ay}) scale(1, -1) rotate(${textRotation})`}
+            style={STYLE_TEXT}
+          >
+            {Math.round(convert(distanceText).from('in').to(layer.unit) * 100) /
+              100}
+            {layer.unit}
+          </text>
+        </g>
+        <circle
+          cx="1"
+          cy="0"
+          fill="white"
+          r="1.1"
+          stroke="black"
+          strokeWidth="0.6"
+        />
+        <line
+          x1="2"
+          y1="0"
+          x2={(length - textLength) / 2 < 0 ? 0 : length}
+          y2="0"
+          style={STYLE}
+        />
+        <line
+          x1={
+            (length + textLength) / 2 < 0
+              ? 0
+              : (length + textLength) / 2 < length
+              ? (length + textLength) / 2
+              : length
+          }
+          y1="0"
+          x2={length}
+          y2="0"
+          style={STYLE}
+        />
+        <circle
+          cx={length - 1}
+          cy="0"
+          fill="white"
+          r="1.1"
+          stroke="black"
+          strokeWidth="0.6"
+        />
+      </g>
+    );
+  } else {
+    return (
+      <g transform={transform}>
+        <g>
+          <text
+            x="0"
+            y="0"
+            transform={`translate(${
+              length / 2
+            },${ay}) scale(1, -1) rotate(${textRotation})`}
+            style={STYLE_TEXT}
+          >
+            {Math.round(convert(distanceText).from('in').to(layer.unit) * 100) /
+              100}
+            {layer.unit}
+          </text>
+        </g>
+        <circle
+          cx="1"
+          cy="0"
+          fill="white"
+          r="1.1"
+          stroke="black"
+          strokeWidth="0.6"
+        />
+        <line
+          x1="2"
+          y1="0"
+          x2={(length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2}
+          y2="0"
+          style={STYLE}
+        />
+        <line
+          x1={
+            (length + textLength) / 2 < 0
+              ? 0
+              : (length + textLength) / 2 < length
+              ? (length + textLength) / 2
+              : length
+          }
+          y1="0"
+          x2={length}
+          y2="0"
+          style={STYLE}
+        />
+        <circle
+          cx={length - 1}
+          cy="0"
+          fill="white"
+          r="1.1"
+          stroke="black"
+          strokeWidth="0.6"
+        />
+      </g>
+    );
+  }
+}
+
+RulerDist.propTypes = {
+  length: PropTypes.number.isRequired,
+  unit: PropTypes.string.isRequired,
+  transform: PropTypes.string.isRequired
+};

package/src/components/viewer2d/rulerX.jsx

@@ -0,0 +1,141 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../shared-style';
+
+export default class RulerX extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    let elementW = this.props.unitPixelSize * this.props.zoom;
+
+    let elementStyle = {
+      display: 'inline-block',
+      width: elementW,
+      position: 'relative',
+      borderLeft: '1px solid ' + this.props.fontColor,
+      paddingLeft: '0.2em',
+      fontSize: '10px',
+      height: '100%'
+    };
+
+    let insideElementsStyle = {
+      width: '20%',
+      display: 'inline-block',
+      margin: 0,
+      padding: 0
+    };
+
+    let rulerStyle = {
+      backgroundColor: this.props.backgroundColor,
+      position: 'relative',
+      width: this.props.width,
+      height: '100%',
+      color: this.props.fontColor
+    };
+
+    let markerStyle = {
+      position: 'absolute',
+      left:
+        this.props.zeroLeftPosition + this.props.mouseX * this.props.zoom - 6.5,
+      top: 8,
+      width: 0,
+      height: 0,
+      borderLeft: '5px solid transparent',
+      borderRight: '5px solid transparent',
+      borderTop: '8px solid ' + this.props.markerColor,
+      zIndex: 9001
+    };
+
+    let rulerContainer = {
+      position: 'absolute',
+      height: '10px',
+      top: '4px',
+      display: 'grid',
+      gridRowGap: '0',
+      gridColumnGap: '0',
+      gridTemplateRows: '100%',
+      grdAutoColumns: `${elementW}px`
+    };
+
+    let positiveRulerContainer = {
+      ...rulerContainer,
+      width: this.props.positiveUnitsNumber * elementW,
+      left: this.props.zeroLeftPosition
+    };
+
+    let negativeRulerContainer = {
+      ...rulerContainer,
+      width: this.props.negativeUnitsNumber * elementW,
+      left:
+        this.props.zeroLeftPosition - this.props.negativeUnitsNumber * elementW
+    };
+
+    let positiveDomElements = [];
+
+    if (elementW <= 200) {
+      for (let x = 0; x < this.props.positiveUnitsNumber; x++) {
+        positiveDomElements.push(
+          <div
+            key={x}
+            style={{ ...elementStyle, gridColumn: x + 1, gridRow: 1 }}
+          >
+            {elementW > 30 ? x * 100 : ''}
+          </div>
+        );
+      }
+    } else if (elementW > 200) {
+      for (let x = 0; x < this.props.positiveUnitsNumber; x++) {
+        let val = x * 100;
+        positiveDomElements.push(
+          <div
+            key={x}
+            style={{ ...elementStyle, gridColumn: x + 1, gridRow: 1 }}
+          >
+            <div style={insideElementsStyle}>{val}</div>
+            <div style={insideElementsStyle}>{val + 1 * 20}</div>
+            <div style={insideElementsStyle}>{val + 2 * 20}</div>
+            <div style={insideElementsStyle}>{val + 3 * 20}</div>
+            <div style={insideElementsStyle}>{val + 4 * 20}</div>
+          </div>
+        );
+      }
+    }
+
+    return (
+      <div style={rulerStyle}>
+        <div id="horizontalMarker" style={markerStyle}></div>
+        <div id="negativeRuler" style={negativeRulerContainer}></div>
+        <div id="positiveRuler" style={positiveRulerContainer}>
+          {positiveDomElements}
+        </div>
+      </div>
+    );
+  }
+}
+
+RulerX.propTypes = {
+  unitPixelSize: PropTypes.number.isRequired,
+  positiveUnitsNumber: PropTypes.number,
+  negativeUnitsNumber: PropTypes.number,
+  zoom: PropTypes.number.isRequired,
+  mouseX: PropTypes.number.isRequired,
+  width: PropTypes.number.isRequired,
+  zeroLeftPosition: PropTypes.number.isRequired,
+  backgroundColor: PropTypes.string,
+  fontColor: PropTypes.string,
+  markerColor: PropTypes.string
+};
+
+RulerX.defaultProps = {
+  positiveUnitsNumber: 50,
+  negativeUnitsNumber: 50,
+  backgroundColor: SharedStyle.PRIMARY_COLOR.main,
+  fontColor: SharedStyle.COLORS.white,
+  markerColor: SharedStyle.SECONDARY_COLOR.main
+};
+
+RulerX.contextTypes = {
+  translator: PropTypes.object.isRequired
+};

package/src/components/viewer2d/rulerY.jsx

@@ -0,0 +1,138 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from '../../shared-style';
+
+export default class RulerY extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    let elementH = this.props.unitPixelSize * this.props.zoom;
+
+    let elementStyle = {
+      width: '8px',
+      borderBottom: '1px solid ' + this.props.fontColor,
+      paddingBottom: '0.2em',
+      fontSize: '10px',
+      height: elementH,
+      textOrientation: 'upright',
+      writingMode: 'vertical-lr',
+      letterSpacing: '-2px',
+      textAlign: 'right'
+    };
+
+    let insideElementsStyle = {
+      height: '20%',
+      width: '100%',
+      textOrientation: 'upright',
+      writingMode: 'vertical-lr',
+      display: 'inline-block',
+      letterSpacing: '-2px',
+      textAlign: 'right'
+    };
+
+    let rulerStyle = {
+      backgroundColor: this.props.backgroundColor,
+      height: this.props.height,
+      width: '100%',
+      color: this.props.fontColor
+    };
+
+    let markerStyle = {
+      position: 'absolute',
+      top:
+        this.props.zeroTopPosition - this.props.mouseY * this.props.zoom - 6.5,
+      left: 8,
+      width: 0,
+      height: 0,
+      borderTop: '5px solid transparent',
+      borderBottom: '5px solid transparent',
+      borderLeft: '8px solid ' + this.props.markerColor,
+      zIndex: 9001
+    };
+
+    let rulerContainer = {
+      position: 'absolute',
+      width: '100%',
+      display: 'grid',
+      gridRowGap: '0',
+      gridColumnGap: '0',
+      gridTemplateColumns: '100%',
+      grdAutoRows: `${elementH}px`,
+      paddingLeft: '5px'
+    };
+
+    let positiveRulerContainer = {
+      ...rulerContainer,
+      top:
+        this.props.zeroTopPosition - this.props.positiveUnitsNumber * elementH,
+      height: this.props.positiveUnitsNumber * elementH
+    };
+
+    let negativeRulerContainer = {
+      ...rulerContainer,
+      top:
+        this.props.zeroTopPosition + this.props.negativeUnitsNumber * elementH,
+      height: this.props.negativeUnitsNumber * elementH
+    };
+
+    let positiveDomElements = [];
+
+    if (elementH <= 200) {
+      for (let x = 1; x <= this.props.positiveUnitsNumber; x++) {
+        positiveDomElements.push(
+          <div key={x} style={{ ...elementStyle, gridColumn: 1, gridRow: x }}>
+            {elementH > 30 ? (this.props.positiveUnitsNumber - x) * 100 : ''}
+          </div>
+        );
+      }
+    } else if (elementH > 200) {
+      for (let x = 1; x <= this.props.positiveUnitsNumber; x++) {
+        let val = (this.props.positiveUnitsNumber - x) * 100;
+        positiveDomElements.push(
+          <div key={x} style={{ ...elementStyle, gridColumn: 1, gridRow: x }}>
+            <div style={insideElementsStyle}>{val + 4 * 20}</div>
+            <div style={insideElementsStyle}>{val + 3 * 20}</div>
+            <div style={insideElementsStyle}>{val + 2 * 20}</div>
+            <div style={insideElementsStyle}>{val + 1 * 20}</div>
+            <div style={insideElementsStyle}>{val}</div>
+          </div>
+        );
+      }
+    }
+
+    return (
+      <div style={rulerStyle}>
+        <div id="verticalMarker" style={markerStyle}></div>
+        <div id="negativeRuler" style={negativeRulerContainer}></div>
+        <div id="positiveRuler" style={positiveRulerContainer}>
+          {positiveDomElements}
+        </div>
+      </div>
+    );
+  }
+}
+
+RulerY.propTypes = {
+  unitPixelSize: PropTypes.number.isRequired,
+  zoom: PropTypes.number.isRequired,
+  mouseY: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  zeroTopPosition: PropTypes.number.isRequired,
+  backgroundColor: PropTypes.string,
+  fontColor: PropTypes.string,
+  markerColor: PropTypes.string
+};
+
+RulerY.defaultProps = {
+  positiveUnitsNumber: 50,
+  negativeUnitsNumber: 50,
+  backgroundColor: SharedStyle.PRIMARY_COLOR.main,
+  fontColor: SharedStyle.COLORS.white,
+  markerColor: SharedStyle.SECONDARY_COLOR.main
+};
+
+RulerY.contextTypes = {
+  translator: PropTypes.object.isRequired
+};

package/src/components/viewer2d/scene.jsx

@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Layer, Grids } from './export';
+import { searchForSkuValue } from './utils';
+
+export default class Scene extends Component {
+  async componentWillReceiveProps(nextProps) {
+    // console.log("componentDidMount", this.props.scene.hashCode(), nextProps.scene.hashCode());
+    if (this.props.scene.hashCode() !== nextProps.scene.hashCode()) {
+      let { scene, catalog } = nextProps;
+      let { height, layers } = scene;
+      let selectedLayer = layers.get(scene.selectedLayer);
+
+      var msg = '';
+      var isNotFoundInElements = false;
+      var itemType = '';
+      selectedLayer.items.valueSeq().forEach(item => {
+        if (!catalog.elements.hasOwnProperty(item.type)) {
+          itemType = item.type;
+          isNotFoundInElements = true;
+        }
+      });
+      // if(isNotFoundInElements){
+      //   const deepSearchResult = await searchForSkuValue(catalog, selectedLayer, itemType)
+      //   if(!deepSearchResult.isAvailable){
+      //     msg += (`Element ${itemType} does not exist in catalog.\n`);
+      //   }
+      // }
+
+      // if(msg !== '') {
+      //   msg += `Do you want to initialize?`;
+      //   confirm(msg)
+      //   ? this.context.projectActions.newProject()
+      //   : null
+      // }
+    }
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    return this.props.scene.hashCode() !== nextProps.scene.hashCode();
+  }
+
+  render() {
+    // console.log("scene", this);
+    let { scene, catalog } = this.props;
+    let { height, layers } = scene;
+    let selectedLayer = layers.get(scene.selectedLayer);
+
+    return (
+      <g>
+        <Grids scene={scene} />
+
+        <g style={{ pointerEvents: 'none' }}>
+          {layers
+            .entrySeq()
+            .filter(
+              ([layerID, layer]) =>
+                layerID !== scene.selectedLayer && layer.visible
+            )
+            .map(([layerID, layer]) => (
+              <Layer
+                key={layerID}
+                layer={layer}
+                scene={scene}
+                catalog={catalog}
+                mode={this.props.state.mode}
+                state={this.props.state}
+                relatedLines={this.props.relatedLines}
+              />
+            ))}
+        </g>
+
+        <Layer
+          key={selectedLayer.id}
+          layer={selectedLayer}
+          scene={scene}
+          catalog={catalog}
+          mode={this.props.state.mode}
+          state={this.props.state}
+          relatedLines={this.props.relatedLines}
+        />
+      </g>
+    );
+  }
+}
+
+Scene.propTypes = {
+  scene: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired,
+  relatedLines: PropTypes.object.isRequired
+};
+
+Scene.contextTypes = {
+  projectActions: PropTypes.object.isRequired
+};