dphelper/docs/markdown/svg.md

dphelper devtools for developers

# svg

SVG manipulation utilities for creating connections, diagrams, and converting elements to SVG format.

## Functions

| Function | Description | Example |
|----------|-------------|---------|
| `init` | Initialize SVG connection between elements | `dphelper.svg.init(container, [el1, 'right'], [el2, 'left'])` |
| `check` | Check SVG browser support | `dphelper.svg.check()` |
| `update` | Update SVG connection positions | `dphelper.svg.update(rect1, rect2, path)` |
| `getCurve` | Calculate curve path between points | `dphelper.svg.getCurve([x1,y1], [x2,y2], distance)` |
| `getIntersection` | Calculate element intersection point | `dphelper.svg.getIntersection(dx, dy, cx, cy, w, h)` |
| `setConnector` | Set connector point on element | `dphelper.svg.setConnector(element, 'right')` |
| `removeConnection` | Remove SVG connection from container | `dphelper.svg.removeConnection(container)` |
| `makeScrollable` | Update connection on scroll | `dphelper.svg.makeScrollable(svg, scroll, el1, el2, rect1, rect2)` |
| `makeDraggable` | Make SVG element draggable | `dphelper.svg.makeDraggable(event)` |
| `toggle` | Toggle SVG connection on/off | `dphelper.svg.toggle(event, container, el1, el2)` |
| `convert` | Convert HTML element to SVG | `dphelper.svg.convert({ children: '#myDiv' })` |

## Description

Complete SVG toolkit:
- **Connection Drawing** - Create visual links between elements
- **Geometry Calculations** - Curves, intersections, positions
- **Interactivity** - Draggable elements, scroll handling
- **Conversion** - Transform HTML to SVG

## Usage Examples

### Creating Connections

```javascript
// HTML structure
// <div id="container">
//   <div id="element1">Source</div>
//   <div id="element2">Target</div>
// </div>

const container = document.getElementById('container');
const el1 = document.getElementById('element1');
const el2 = document.getElementById('element2');

// Initialize connection from right of el1 to left of el2
dphelper.svg.init(container, [el1, 'right'], [el2, 'left']);

// Connection uses bezier curves
```

### Connection Sides

```javascript
// Available connection points
dphelper.svg.init(container, [el1, 'top'], [el2, 'bottom']);
dphelper.svg.init(container, [el1, 'right'], [el2, 'left']);
dphelper.svg.init(container, [el1, 'left'], [el2, 'right']);
dphelper.svg.init(container, [el1, 'bottom'], [el2, 'top']);
```

### Toggle Connection

```javascript
// Toggle connection with checkbox
const checkbox = document.getElementById('toggleConnection');
const container = document.getElementById('diagram');
const source1 = document.getElementById('node1');
const source2 = document.getElementById('node2');

checkbox.addEventListener('change', (e) => {
  dphelper.svg.toggle(e, container, source1, source2);
});
```

### HTML to SVG Conversion

```javascript
// Convert a div to SVG
dphelper.svg.convert({
  children: '#myContent',  // Element to convert
  active: true,
  size: [1920, 1080],     // ViewBox size
  fit: ['100%', '100%'],  // Display size
  preserveAspectRatio: 'xMidYMid meet'
});

// Creates SVG with foreignObject containing the HTML
```

### Check SVG Support

```javascript
// Check if browser supports SVG
if (dphelper.svg.check()) {
  console.log('SVG supported');
} else {
  console.log('SVG not supported - fallback to canvas');
}
```

### Remove Connections

```javascript
// Remove all SVG connections from container
dphelper.svg.removeConnection(document.getElementById('container'));
```

## Advanced Usage

### Flowchart Builder

```javascript
class FlowchartBuilder {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    this.connections = [];
  }

  addNode(id, x, y, label) {
    const node = document.createElement('div');
    node.id = id;
    node.className = 'flow-node';
    node.style.left = x + 'px';
    node.style.top = y + 'px';
    node.textContent = label;
    this.container.appendChild(node);
    return node;
  }

  connect(fromId, toId) {
    const from = document.getElementById(fromId);
    const to = document.getElementById(toId);

    dphelper.svg.init(this.container, [from, 'right'], [to, 'left']);
  }
}

// Usage
const flowchart = new FlowchartBuilder('canvas');
flowchart.addNode('start', 10, 50, 'Start');
flowchart.addNode('process', 200, 50, 'Process');
flowchart.addNode('end', 400, 50, 'End');

flowchart.connect('start', 'process');
flowchart.connect('process', 'end');
```

### Draggable SVG Elements

```javascript
// Make SVG elements draggable
const svgElement = document.querySelector('#mySvg circle');
dphelper.svg.makeDraggable(svgElement);

// Enables mouse drag functionality on SVG elements
```

## Details

- **Author:** Dario Passariello
- **Version:** 0.0.2
- **Creation Date:** 20210101
- **Last Modified:** 20260220
- **Environment:** Client-side only (browser)

---

*Automatically generated document*