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>
);
}