ekx Docs
Open appSign in

Navigation and zoom

Navigate the SLD canvas efficiently using mouse and keyboard controls to view different areas of your diagram and adjust zoom levels.

Pan (move viewport)

Move around the canvas without changing component positions:

Method 1: Right-click drag

  1. Right-click and hold anywhere on the canvas background.
  2. Drag to move the viewport.
  3. Release to stop panning.

Method 2: Middle-click drag

  1. Click and hold the middle mouse button (scroll wheel button).
  2. Drag to move the viewport.
  3. Release to stop panning.

Method 3: Space+drag

  1. Hold the Space bar.
  2. Click and drag with left mouse button.
  3. Release Space when done.

All three methods produce the same result - choose whichever feels most natural.

Zoom in and out

Adjust the canvas zoom level to see more detail or get an overview:

Mouse wheel zoom:

  1. Position mouse cursor over the area you want to zoom.
  2. Scroll mouse wheel up to zoom in.
  3. Scroll mouse wheel down to zoom out.
  4. The canvas zooms centered on your cursor position.

Zoom range:

  • Minimum: 0.5× (50% - wide overview)
  • Maximum: 3× (300% - detailed closeup)
  • Default: 1× (100% - actual size)

Zoom behavior:

  • Zooming centers on cursor position (zoom where you're looking)
  • Grid scales with zoom level
  • Component sizes remain visually proportional
  • Handles and connections scale appropriately

Zoom controls

Use toolbar buttons for precise zoom control:

Zoom in button:

  • Click to zoom in one step
  • Zooms toward canvas center
  • Alternative to mouse wheel

Zoom out button:

  • Click to zoom out one step
  • Zooms from canvas center

Zoom percentage display:

  • Shows current zoom level (e.g., "100%")
  • Click to reset to 100% zoom

Fit to view:

  • Automatically adjusts zoom and pan to show all components
  • Useful after placing many components
  • Centers the view on your diagram

Fit to view

The fit-to-view function automatically frames all components:

  1. Click the Fit View button in the toolbar.
  2. Canvas zooms out (or in) to show all components.
  3. Canvas pans to center all components in the viewport.
  4. Adds small padding around the edges.

Use fit-to-view when:

  • You've zoomed in too far and lost your orientation
  • Components are scattered across the canvas
  • You want to take a screenshot of the entire diagram
  • Starting work on a project someone else created

Zoom to selection

Focus on selected components:

  1. Select one or more components.
  2. Click Zoom to Selection (if available).
  3. Canvas zooms and pans to frame the selected components.

This helps when working on a specific section of a large diagram.

Viewport persistence

The canvas remembers your zoom and pan position:

  • Zoom level saves when you navigate away
  • Pan position saves automatically
  • When you return to the project, the view restores to your last position
  • Each project remembers its own viewport independently

This allows you to:

  • Leave a project mid-edit and return to the exact same view
  • Work on specific diagram sections across multiple sessions
  • Maintain your preferred zoom level

Reset view

To return to default view:

  1. Click the zoom percentage display.
  2. Canvas resets to 100% zoom.
  3. Canvas centers on the origin (0, 0) or components.

Alternatively:

  • Use Fit View to automatically frame all components
  • Manually zoom to 100% and pan to center

Minimap (if available)

Some views include a minimap showing the entire canvas:

  • Small overview panel in corner of canvas
  • Shows all components as simplified rectangles
  • Highlights your current viewport
  • Click and drag in minimap to pan quickly

The minimap provides orientation on large diagrams with components spread across wide areas.

Working with large diagrams

For diagrams with many components:

Use zoom strategically:

  • Zoom out for overview and understanding system architecture
  • Zoom in for detailed editing of specific components
  • Use fit-to-view frequently to reorient

Pan efficiently:

  • Right-click drag is fastest for large movements
  • Mouse wheel zoom+pan combination reduces hand movement
  • Use minimap for quick jumps if available

Organize components:

  • Keep related components close together
  • Use buses to centralize connections
  • Avoid spreading components unnecessarily

Performance considerations

Very large canvases may experience performance impacts:

  • 100+ components: Minor performance impact
  • 500+ components: Noticeable at high zoom
  • 1000+ components: Consider splitting into multiple projects

Zoom level affects rendering performance:

  • Lower zoom (zoomed out) renders faster
  • Higher zoom (zoomed in) renders more detail

If you experience lag:

  • Zoom out slightly
  • Close other browser tabs
  • Reduce number of visible components by organizing into hierarchical projects

Related topics

On this page

Pan (move viewport)Zoom in and outZoom controlsFit to viewZoom to selectionViewport persistenceReset viewMinimap (if available)Working with large diagramsPerformance considerationsRelated topics