react-planner-viewer/demo/src/catalog/items/router-wifi/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 = 20;
const DEPTH = 5;
const HEIGHT= 20;
const RADIUS = 10;

export default {
  name: "wifi_tracker",
  prototype: "items",

  info: {
    tag: ['telecomunication'],
    group: "Items",
    title: "wifi tracker",
    description: "wifi Tracker",
    image: require('./routerWifi.png')
  },
  properties: {
    serialNumber: {
      label: "serial Number",
      type: "string",
      defaultValue: "0",
    }
  },

  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: "#bb00ff"}}/>
      <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>
    )
  },
};