react-planner-viewer/demo/src/catalog/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';




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",
    },
    source: {
      label: 'source',
      type: 'string',
      defaultValue: "none",
    },
    target: {
      label: 'target',
      type: 'string',
      defaultValue: "none",
    },

  },

  render2D: function (element, layer, scene) {
    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 holePath = `M${0} ${-epsilon}  L${holeWidth} ${-epsilon}  L${holeWidth} ${epsilon}  L${0} ${epsilon}  z`;
    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="0" y="0" transform={`scale(1, -1)`} style={STYLE_TEXT}>
          {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>
    )
  },

}