public render()

in src/components/view/View.tsx [305:360]
47 lines of code
1 McCabe index (conditional complexity)

  public render() {
    const {
      position: workspacePosition,
      canvasSize: workspaceSize,
      scale: workspaceScale
    } = this.props.state.workspace;

    /**
     * We need to put interim on top of the panels so that we can make the potential nodes appear on top of the panels.
     * This is because workspace has a stacking context of its own and we cannot make the node appear on top of the
     * panel from within the workspace.
     * To make it so that when the node comes out of the panel, it appears the same size as it would in the workspace,
     * we need to apply the same transforms on the interim as well.
     */
    const transform = `translate3d(${workspacePosition.x}px, ${workspacePosition.y}px, 0) scale(${workspaceScale})`;

    return (
      <div className="dm-view" tabIndex={0} data-type={DiagramMakerComponentsType.VIEW}>
        <Workspace
          position={workspacePosition}
          canvasSize={workspaceSize}
          scale={workspaceScale}
        >
          <div className="dm-elements">
            <svg className="dm-edges" xmlns="http://www.w3.org/2000/svg">
              {this.renderArrowheadMarker()}
              {this.renderEdges()}
            </svg>
            {this.renderEdgeBadges()}
            {this.renderNodes()}
            <svg className="dm-potential-edge" xmlns="http://www.w3.org/2000/svg">
              {this.renderPotentialEdge()}
            </svg>
          </div>
        </Workspace>
        <div className="dm-panels">
          {this.renderPanels()}
        </div>
        <div
          className="dm-interim"
          style={{ transform }}
        >
          {this.renderPotentialNode()}
        </div>
        <div
          className="dm-selection"
          style={{ transform }}
        >
          {this.renderSelectionMarquee()}
        </div>
        <div className="dm-menu">
          {this.renderContextMenu()}
        </div>
      </div>
    );
  }