Documentation/Core Features/Canvas Operations

Canvas Operations

Master the visual workflow editor with powerful navigation, editing, and optimization features for efficient computational workflow design.

Canvas Features

Powerful features for creating and managing complex computational workflows.

Visual Workflow Editor

Drag-and-drop interface for building computational workflows

  • •Infinite canvas workspace
  • •Drag-and-drop node placement
  • •Visual connection system
  • •Real-time node positioning
  • •Grid-based alignment system

Navigation & Zoom

Navigate large workflows with smooth zooming and panning

  • •Mouse wheel zoom (10x range)
  • •Pinch-to-zoom on touch devices
  • •Pan with middle mouse or right-click drag
  • •Auto-fit view to content
  • •Smooth animations and transitions

Node Management

Comprehensive node manipulation and organization

  • •Select single or multiple nodes
  • •Group operations (move, delete, copy)
  • •Node alignment tools
  • •Layer management
  • •Node grouping and organization

Visual Feedback

Clear visual indicators for workflow state and errors

  • •Connection validation colors
  • •Node execution status indicators
  • •Error highlighting
  • •Progress visualization
  • •Real-time connection feedback

Navigation Controls

Master canvas navigation for efficient workflow editing.

Zoom In/Out

Methods:

Mouse wheel up/downCtrl + ScrollPinch gesture

Zoom from 10% to 1000% of original size

Pan Canvas

Methods:

Middle mouse dragRight-click dragSpace + drag

Move around the canvas in any direction

Fit to Screen

Methods:

Double-click canvasView → Fit to ScreenF key

Automatically zoom to show all nodes

Center Selection

Methods:

Right-click → Center on Selection

Focus view on selected nodes

Editing Operations

Essential operations for workflow creation and modification.

Select Nodes

Left-click nodeDrag selection boxCtrl + click (multiple)

Select one or more nodes for editing

Move Nodes

Drag selected nodesArrow keys (1px steps)Shift + arrow (10px steps)

Reposition nodes on the canvas

Copy/Paste

Ctrl + C/VRight-click → Copy/PasteDuplicate node

Duplicate nodes and connections

Delete Nodes

Delete keyRight-click → DeleteBackspace

Remove nodes and their connections

Edit Properties

Double-click nodeRight-click → PropertiesSettings icon

Configure node parameters and settings

Connection System

Visual connection system with type checking and validation.

Visual Connection Creation

Drag from output port to input port to create connections

Benefits:

  • ✓Real-time visual feedback
  • ✓Type compatibility checking
  • ✓Connection validation
  • ✓Automatic path routing
  • ✓Connection labeling

Connection Types

Different visual styles for different data types

Connection Types:

molecules

Molecular structure data

data

Tabular data and DataFrames

file

File paths and references

image

Plot and visualization data

string

Text and configuration data

Connection Management

Tools for organizing and managing node connections

Available Tools:

Connection deletionConnection labelingConnection reroutingMultiple input handlingConnection validation

Performance & Optimization

Canvas optimizations for smooth workflow editing experience.

Performance Features

Canvas optimizations for smooth workflow editing

  • •Viewport-based rendering
  • •Lazy loading of node graphics
  • •Efficient scene management
  • •Optimized redraw regions
  • •Hardware acceleration support

Memory Management

Efficient resource usage for large workflows

  • •Automatic cleanup of unused resources
  • •Node graphics caching
  • •Connection path optimization
  • •Memory usage monitoring
  • •Background task management

User Experience

Features that enhance the editing experience

  • •Smooth animations
  • •Responsive interactions
  • •Visual feedback systems
  • •Error prevention
  • •Accessibility support

Ready to Create Workflows?

Now that you understand canvas operations, learn about data management and file operations in Bioshift workflows.

Data ManagementFile I/O Operations