react-planner-viewer/src/catalog/myCatalog/holes/gate/planner-element.jsx

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

import React from 'react';
import path from 'path';

var STYLE_TEXT = {
  textAnchor: 'middle',
  fontSize: '12px',
  fontFamily: '"Courier New", Courier, monospace',
  pointerEvents: 'none',
  fontWeight: 'bold',
  zIndex: 100,

  //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 {
  name: 'access',
  prototype: 'holes',
  info: {
    tag: ['access'],
    group: 'access',
    title: 'access',
    description: 'hole in the wall',
    image: require('./gate.png')
  },

  properties: {
    width: {
      label: 'width',
      type: 'length-measure',
      defaultValue: {
        length: 80
      }
    },
    gate: {
      label: 'gate',
      type: 'string',
      selectAreas: true,
      defaultValue: "none",
    },

  },

  render2D: function (element, layer, scene, fontSize) {
    const STYLE_HOLE_BASE = { stroke: '#000', strokeWidth: '3px', fill: '#000' };
    const STYLE_HOLE_SELECTED = { stroke: '#0096fd', strokeWidth: '4px', fill: '#0096fd', cursor: 'move' };
    const STYLE_ARC_BASE = { stroke: '#000', strokeWidth: '3px', strokeDasharray: '5,5', fill: 'none' };
    const STYLE_ARC_SELECTED = {
      stroke: '#0096fd',
      strokeWidth: '4px',
      strokeDasharray: '5,5',
      fill: 'none',
      cursor: 'move'
    };

    let epsilon = 3;

    let holeWidth = element.properties.get('width').get('length');
    let arcPath = `M${0},${0}  A${0},${0} 0 0,1 ${holeWidth},${0}`;
    let holeStyle = element.selected ? STYLE_HOLE_SELECTED : STYLE_HOLE_BASE;
    let arcStyle = element.selected ? STYLE_ARC_SELECTED : STYLE_ARC_BASE;
    let length = element.properties.get('width').get('length');


    return (
      <g transform={`translate(${-length / 2}, 0)`}>
        <text x={holeWidth/2} y="-10" transform={`scale(1, -1)`} style={{ ...STYLE_TEXT, fontSize: fontSize + 'px' }}>
          {element.getIn(['properties', 'gate'])}
        </text>
        <line key='1' x1={0} y1={holeWidth / 6 - epsilon} x2={0} y2={-holeWidth / 6 + epsilon} style={holeStyle}
          transform={`scale(${-1},${1})`} />
        <line key='2' x1={-holeWidth} y1={holeWidth / 6 - epsilon} x2={-holeWidth} y2={-holeWidth / 6 + epsilon} style={holeStyle}
          transform={`scale(${-1},${1})`} />
        <path key='3' d={arcPath} style={arcStyle} />
      </g>
    )
  }

}