Enhance Connector Control and Customization in CanvasX

[usamshen]

Introduction
Connectors are essential for linking different elements on the BoardX whiteboard. They help visualize relationships, workflows, hierarchies, and conceptual connections.

Purpose
The purpose of this document is to detail the specific requirements for creating, customizing, and managing connectors on CanvasX, ensuring a consistent and efficient user experience.

Scope
This document covers the types of connectors, customization options for connector tips, and user interaction patterns for creating and managing connectors.

Functional Requirements

1. Types of Connectors

• Straight Connectors

• - Draw a straight line between two points.

• - Adjustable line thickness and color.

• Angled Connectors

• Create connectors with right-angle turns.

• - Adjustable corner radius and line thickness.

• - Customizable line color.

• Curved Connectors

• - Draw smooth, bezier curve connectors between points.

• - Control points for adjusting curvature.

• - Adjustable line thickness and color.

2. Connector Tips

• Start Tip

• - Options: None, Arrow, Circle, Square, Diamond.

• - Customizable size and color.

• End Tip

• - Options: None, Arrow, Circle, Square, Diamond.

• - Customizable size and color.

• Both Ends

• - Customize both start and end tips independently.

3. Customization Options

• Line Style

• - Options: Solid, Dashed, Dotted.

• - Adjustable dash/dot pattern length for dashed and dotted lines.

• Line Color and Thickness

• - Allow users to pick any color for the line.

• - Adjustable line thickness.

• Labeling Connectors

• - Allow users to add text labels to connectors.

• - Position labels at the start, middle, or end of the connector.

• - Customizable font, size, and color for labels.

4. User Interaction

• Creating Connectors

• - Drag from a connection point on one object to another to create a connector.

• - Snap connectors to predefined connection points on objects.

• Editing Connectors

• - Click on a connector to select it and reveal control points.

• - Drag control points to adjust the position and shape of the connector.

• - Use widget menu to change connector settings.

• Deleting Connectors

• - Select a connector and press Delete or use a context menu to remove it.

5. Connector Behaviors

• Auto-routing

• - Automatically adjust connector paths to avoid overlapping other connectors and objects.

• - Offer manual override for fine-tuning paths.

• Sticky Connectors

• - Connectors should stick to objects when they are moved, maintaining connections.

6. Detailed Enhancements and User Interactions

Control Points

• 1. By default, each connector should have one control point.
• 2. When a user drags the default control point, it will change the routing of the connector.
• 3. After the user changes the initial control point, two additional control points should be added to the connector, allowing further customization of the routing.

Connector Creation Methods

1. Using Connector Control on Widgets

• - Users can drag from a connector control on a widget to another object to create a new connector.
• - Widgets such as XRectNotes, XCircleNotes, and XShapes will support connector controls.

2. Using Board Menu

• - Users can enter "draw arrow" or "connector mode" via the board menu.
• - In this mode, when a user hovers over target widgets (XRectNotes, XCircleNotes, XShapes), the connector controls will be highlighted.

Docking Feature

• - During connector creation mode, when the mouse moves close to a target control point, the docking feature will be activated, snapping the connector to the nearest control point.

Movement Synchronization

• - When moving connected objects, the connectors should move correspondingly to maintain the connections.