react-planner-viewer/src/catalog/factories/wall-factory.jsx

react-planner-viewer is a React Component for view plans builded with react-planner in 2D mode

import React from 'react';
import * as SharedStyle from '../../shared-style';
import * as Geometry from '../../utils/geometry';
import styled from 'styled-components';

const epsilon = 3;
const STYLE_TEXT = {textAnchor: 'middle'};
const STYLE_LINE = {stroke: '#99c3fb'};


const PathSc = styled.path`
  stroke: ${props => props.selected? '#287AA4': null};
  fill: ${props => props.selected? '#287AA4': '#464E5A'};;
  stroke-width: 2px;
  width: 0px;
  stroke-dasharray: ${props => props.selected? 30: null};;
  animation: ${props => props.selected? 'dash 20s infinite linear': null};
  @keyframes dash {
    to { stroke-dashoffset: 1000; }
  }
`;

export default function WallFactory(name, info, textures) {

  let wallElement = {
    name,
    prototype: 'lines',
    info,
    properties: {
      height: {
        label: 'Height',
        type: 'length-measure',
        defaultValue: {
          length: 300,
        }
      },
    },

    render2D: function (element, layer, scene) {
      let {x:x1, y:y1} = layer.vertices.get(element.vertices.get(0));
      let {x:x2, y: y2} = layer.vertices.get(element.vertices.get(1));

      let length = Geometry.pointsDistance(x1, y1, x2, y2);
      let path = `M${0} ${ -epsilon}  L${length} ${-epsilon}  L${length} ${epsilon}  L${0} ${epsilon}  z`;
      let length_5 = length / 5;

      return  <PathSc selected={element.selected} d={path}/>
    },
  };

  if (textures && textures !== {}) {

    let textureValues = {
      'none': 'None'
    };

    for (let textureName in textures) {
      textureValues[textureName] = textures[textureName].name
    }

    wallElement.properties.textureA = {
      label: 'Covering A',
      type: 'enum',
      defaultValue: 'bricks',
      values: textureValues
    };

    wallElement.properties.textureB = {
      label: 'Covering B',
      type: 'enum',
      defaultValue: 'bricks',
      values: textureValues
    };

  }

  return wallElement;

}