public render()

in src/component/minimap/Minimap.tsx [27:69]


  public render(): JSX.Element | undefined {
    const plugins = this.props.state.plugins;
    if (!plugins) return;

    const minimap = plugins.minimap;
    const workspace = this.props.state.workspace;
    const nodes = this.props.state.nodes;

    const scale = getScale(workspace, minimap);
    const containerSize = minimap.data.size;
    const canvasSize = this.getCanvasSize(workspace, containerSize, scale);
    const emptyTop = (containerSize.height - canvasSize.height) / 2;
    const emptyLeft = (containerSize.width - canvasSize.width) / 2;

    const rectOffset = getRectOffset(workspace, scale);
    const rectSize = getRectSize(workspace, scale);
    const rectTransform = `translate3d(${rectOffset.x + emptyLeft}px, ${rectOffset.y + emptyTop}px, 0)`;

    const renderedMinimapNodes = this.renderMinimapNodes(nodes, scale);

    return(
      <div
        className="dm-minimap-container"
        style={{ width: containerSize.width, height: containerSize.height }}
      >
        <div
          data-event-target={true}
          data-draggable={true}
          data-type={DiagramMakerMinimapType.RECTANGLE}
          style={{ transform: rectTransform, width: rectSize.width, height: rectSize.height }}
          className="dm-minimap-rectangle"
        />
        <div
          data-event-target={true}
          data-type={DiagramMakerMinimapType.CANVAS}
          className="dm-minimap-canvas"
          style={{ width: canvasSize.width, height: canvasSize.height, top: emptyTop, left: emptyLeft }}
        >
          {renderedMinimapNodes}
        </div>
      </div>
    );
  }