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

package/src/components/viewer2d/ruler.jsx

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

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

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

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

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