react-planner-viewer/src/catalog/myCatalog/items/camera/planner-element.jsx

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

import React from 'react';

const WIDTH = 10;
const DEPTH = 20;
const HEIGHT = 20;

export default {
  name: 'camera',
  prototype: 'items',
  info: {
    tag: ['security', 'metal'],
    group: 'items',
    title: 'camera',
    description: 'camera',
    image: require('./camera.png')
  },
  properties: {
    access: {
      label: 'access',
      type: 'string',
      defaultValue: "none",
    },
    serialNumber: {
      label: 'serial Number',
      type: 'string',
      defaultValue: "none",
    },
    insideZone: {
      label: 'inside Zone',
      type: 'enum',
      defaultValue: "source",
      values:{"source":"source","target":"target"}
    }
  },

  render2D: function (element, layer, scene) {

    let angle = element.rotation + 90;

    let textRotation = 0;
    if (Math.sin(angle * Math.PI / 180) < 0) {
      textRotation = 180;
    }

    return (
      <g transform={`translate(${-WIDTH / 2},${-DEPTH/2})`}>
      <rect key='1' x='0' y='0' width={WIDTH}  height={DEPTH}
        style={{stroke: element.selected ? '#0096fd' : '#000', strokeWidth: '2px', fill: '#84e1ce'}}/>
      <text key='2' x='0' y='0'
            transform={`translate(${WIDTH / 2}, ${DEPTH / 2}) scale(1,-1) rotate(${textRotation})`}
        style={{textAnchor: 'middle', fontSize: '11px'}}>
        {element.type}
        </text>
        </g>
    )
  },
};