@zenode/designer 3.5.0

package/APIs.md

@@ -0,0 +1,60 @@
+# Zenode Engine Public API Reference
+
+The Zenode Engine is a high-performance, D3.js-powered diagramming library. This reference documents the Layer 1 (Core) APIs available for node management, viewport control, and JSON-based persistence.
+
+## 1. Core Lifecycle & Configuration
+
+| API | Description | Usage Example |
+|---|---|---|
+| `initializeCanvas(selector, config)` | Starts the engine in the target DOM element. | `Zenode.initializeCanvas('#canvas', { ... })` |
+| `updateConfig(config)` | Dynamically updates engine settings. | `Zenode.updateConfig({ grid: { visible: false } })` |
+| `resizeCanvas(w, h)` | Updates canvas dimensions (e.g., on window resize). | `Zenode.resizeCanvas(window.innerWidth, 600)` |
+| `clear()` | Wipes all nodes and edges from the workspace. | `Zenode.clear()` |
+| `getDiagramState()` | Returns a JSON snapshot of nodes, edges, and viewport. | `const state = Zenode.getDiagramState()` |
+
+## 2. Node & Edge Management
+
+| API | Description | Usage Example |
+|---|---|---|
+| `addNode(config)` | Adds a node. Returns the generated or provided ID. | `const id = Zenode.addNode({ type: 'rectangle', x: 50, y: 50 })` |
+| `removeNode(id)` | Deletes a node and its connections. | `Zenode.removeNode('n1')` |
+| `updateNode(id, patch)` | Updates node data (position, meta). | `Zenode.updateNode('n1', { x: 200 })` |
+| `addEdge(config)` | Creates a connection. Supports `type` override. | `Zenode.addEdge({ sourceNodeId: 'n1', targetNodeId: 'n2', type: 's-shaped' })` |
+| `duplicateNode(id)` | Clones a node and its content. | `Zenode.duplicateNode('n1')` |
+| `focusNode(id, opts?)` | Animates the viewport to focus on a node. | `Zenode.focusNode('n1', { zoom: 1.5, duration: 500 })` |
+| `groupSelection()` | Encapsulates the current selection within a visual group boundary. | `Zenode.groupSelection()` |
+| `ungroupSelection()` | Break apart active selection or selected group. | `Zenode.ungroupSelection()` |
+| `toggleGroupingSelection()` | Smart toggle: groups selected nodes, or ungroups if exactly matching an existing group. | `Zenode.toggleGroupingSelection()` |
+| `getVisualGroups()` | Returns array of all active visual groups. | `const groups = Zenode.getVisualGroups()` |
+| `removeVisualGroup(id)` | Deletes a group boundary (without deleting the member nodes). | `engine.removeVisualGroup('g1')` |
+| `bringToFront(ids)` | Moves nodes to top layer. | `Zenode.bringToFront(['n1'])` |
+| `sendToBack(ids)` | Moves nodes to bottom layer. | `Zenode.sendToBack(['n1'])` |
+
+## 3. Data Serialization & Export
+
+| API | Description | Usage Example |
+|---|---|---|
+| `validate()` | Runs structural validation (cycles, orphans). | `const result = Zenode.validate()` |
+
+## 4. Visual Feedback & Status
+
+| API | Description | Usage Example |
+|---|---|---|
+| `setNodeStatus(id, type)` | Triggers visual cues (`running`, `success`, `error`). | `engine.setNodeStatus('n1', 'error')` |
+| `updateNodeContent(id, cnt)` | Sets text, icons, and layout for a node. | `Zenode.updateNodeContent('n1', { items: [...] })` |
+| `highlight(id, opts?)` | Pulses a node with target behavior/color. | `engine.highlight('n1', { color: '#ff0000', duration: 3000 })` |
+
+## 5. Placement & Interaction
+
+| API | Description | Usage Example |
+|---|---|---|
+| `placeShapeAt(type, id, x, y)` | Immediately places a shape at exact canvas coordinates. | `engine.placeShapeAt('circle', 'c1', 100, 200)` |
+| `placeShapeAtSafePos(type, id)` | Finds the nearest non-overlapping spot in viewport to place a shape. | `engine.placeShapeAtSafePos('rectangle', 'r1')` |
+| `handleDrop(event)` | Native DND handler: parses drop data and places shape at mouse. | `container.ondrop = (e) => Zenode.handleDrop(e)` |
+| `startPlacement(type, id, data?)` | Enters placement mode with a ghost preview. | `engine.startPlacement('rectangle', 'task0')` |
+| `cancelPlacement()` | Aborts placement mode and removes preview. | `engine.cancelPlacement()` |
+
+---
+
+> [!TIP]
+> **Deterministic IDs**: If you provide an `id` in `addNode(config)`, the engine will use it strictly. If not, it will return a UUID which you should store for future `updateNode` calls.

package/LICENSE

@@ -0,0 +1,12 @@
+Zenode License
+
+Copyright (c) 2024 martinmanu
+
+Permission is hereby granted to use this software for personal and commercial purposes.
+However, copying, modifying, distributing, or reverse-engineering this software 
+is strictly prohibited without prior written permission from the author.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,219 @@
+<div align="center">
+
+# Zenode Designer
+
+**A high-performance, D3.js-powered visual workflow canvas for JavaScript.**  
+Engineering-first · JSON-schema-driven · Framework-agnostic · Performance-tuned
+
+[![npm version](https://img.shields.io/npm/v/@zenode/designer?style=flat-square&color=4A90E2)](https://www.npmjs.com/package/@zenode/designer)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green?style=flat-square)](LICENSE)
+[![GitHub Stars](https://img.shields.io/github/stars/martinmanu/Zenode?style=flat-square&color=ffd700)](https://github.com/martinmanu/Zenode/stargazers)
+[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue?style=flat-square)](https://www.typescriptlang.org/)
+[![D3.js](https://img.shields.io/badge/Powered%20by-D3.js-orange?style=flat-square)](https://d3js.org/)
+
+</div>
+
+---
+
+> **`@zenode/designer`** is Layer 1 of the Zenode ecosystem — the visual canvas that powers everything. Drop it into any JavaScript project (React, Vue, Svelte, or vanilla) and get a production-grade diagramming engine with zero lock-in.
+
+---
+
+## Demo
+
+<div align="center">
+  <video src="assets/demo.mp4" width="100%" autoplay loop muted playsinline></video>
+</div>
+
+---
+
+## Key Capabilities
+
+*   **D3-Native Performance**: Leverages the power of D3.js for fine-grained SVG control, ensuring thousands of nodes run smoothly at 60fps.
+*   **Infinite Canvas**: A truly unrestricted panning and zooming environment with a synced SVG pattern grid.
+*   **Generic History Engine**: Robust undo/redo system based on the Command pattern, capturing full state snapshots for perfect restoration.
+*   **Smart Selection**: Integrated single-select, lasso multi-select, and renderer-aware selection overlays.
+*   **Extensible Context Pad**: A floating HTML action bar that follows your selection, fully customizable via a simple registration API.
+*   **Visual Grouping**: Encapsulate multiple nodes within collective boundaries with synced movement and ghost previews.
+*   **Visual Effects Suite**: Built-in support for status glows, stroke-flow animations, and progress gradients.
+
+---
+
+## The Zenode Ecosystem
+
+Zenode is built as a modular four-layer system. You can adopt one package for a specific need or use the entire stack for a complete workflow solution.
+
+| Layer | Package | Role |
+|---|---|---|
+| **Layer 1** | `@zenode/designer` | **Visual Canvas**: Shapes, connections, and user interaction (This Package). |
+| **Layer 2** | `@zenode/serializer` | **Data Exchange**: High-fidelity export/import (JSON, BPMN 2.0, Mermaid). |
+| **Layer 3** | `@zenode/runtime` | **Execution**: Converts diagrams into executable JavaScript workflows. |
+| **Layer 4** | `@zenode/transformer` | **Output Shaping**: User-defined data mapping from execution results. |
+
+---
+
+## Quick Start
+
+### Installation
+
+```bash
+npm install @zenode/designer
+```
+
+### Initialization
+
+```html
+<div id="canvasContainer" style="width: 100vw; height: 100vh;"></div>
+
+<script type="module">
+  import * as Zenode from '@zenode/designer';
+
+  // Initialize with optional configuration
+  const engine = Zenode.initializeCanvas('#canvasContainer', {
+    canvas: { backgroundColor: '#f8fafc' },
+    canvasProperties: {
+      snapToGrid: true,
+      zoomEnabled: true
+    }
+  });
+
+  // Create shapes programmatically
+  Zenode.createShape('rectangle', 'start-node');
+</script>
+```
+
+---
+
+## Core Architecture
+
+### The ShapeRenderer Contract
+
+Zenode uses a unique renderer contract. Every shape — whether built-in or custom — must implement this interface. This ensures that features like selection rings, ports, and alignment guides work perfectly across any geometry.
+
+```typescript
+export interface ShapeRenderer {
+  draw:      (g: D3Selection, config: ResolvedShapeConfig) => void;
+  getPath:   (config: ResolvedShapeConfig) => string;     // Exact SVG path data
+  getBounds: (config: ResolvedShapeConfig) => BoundingBox; // Collision/Selection box
+  getPorts:  (config: ResolvedShapeConfig) => PortMap;    // Connection anchors
+}
+```
+
+### D3 Layer Stack
+
+Layers are strictly ordered to ensure predictable depth management and event bubbling:
+
+1. `g.grid` — The infinite background pattern.
+2. `g.connections` — The link/edge layer.
+3. `g.placed-nodes` — The primary interactive shapes.
+4. `g.preview` — Ghost previews (pointer-events: none).
+5. `g.guides` — Alignment assistants.
+6. `g.lasso` — Box selection overlay.
+
+---
+
+## Roadmap
+
+| Component | Status | Progress |
+|---|---|---|
+| **Core Interaction** | ✅ | Drag, Snap, Lasso, Zoom/Pan complete |
+| **Connection Engine** | ✅ | Straight, Curved, S-Shape, L-Bent routing |
+| **History System** | ✅ | Full Undo/Redo command pattern |
+| **Context Pad** | ✅ | Floating actions & Plugin API |
+| **Visual Grouping** | ✅ | Boundary containers & collective movement |
+| **BPMN Parity** | 🔨 | Resize handles & lane support in progress |
+| **Serialization** | ✅ | Mermaid, XML, DOT & JSON support |
+| **Properties** | 🔨 | Schema-driven node panels (Layer 1) |
+
+---
+
+## Why Zenode?
+
+| Feature | React Flow | BPMN.js | **Zenode** |
+|---|---|---|---|
+| **Agnostic** | ❌ (React only) | ✅ | ✅ (Any Framework) |
+| **SVG Control** | Limited | High | **Absolute** |
+| **Visual Effects** | Manual | CSS only | **Built-in (Glow/Animate)** |
+| **Execution** | ❌ | ❌ | ✅ (via Layer 3) |
+| **Plugin-first** | ⚠️ | ❌ | ✅ |
+
+## 🛠 API Reference
+
+<details>
+<summary><b>View Complete Engine API (Expand)</b></summary>
+<br>
+
+The Zenode Engine is a high-performance, D3.js-powered diagramming library. This reference documented the Layer 1 (Core) APIs available for node management, viewport control, and data serialization.
+
+### 1. Core Lifecycle & Configuration
+| API | Description | Usage Example |
+|---|---|---|
+| `initializeCanvas(selector, config)` | Starts the engine in the target DOM element. | `Zenode.initializeCanvas('#canvas', { ... })` |
+| `updateConfig(config)` | Dynamically updates engine settings. | `Zenode.updateConfig({ grid: { visible: false } })` |
+| `getDiagramState()` | Returns a JSON snapshot of nodes, edges, and viewport. | `const state = Zenode.getDiagramState()` |
+| `clear()` | Wipes all nodes and edges from the workspace. | `Zenode.clear()` |
+| `reset()` | Clears everything and resets zoom/pan to defaults. | `Zenode.reset()` |
+| `zoomTo(scale, ms?)` | Sets absolute zoom level (e.g. 1.0 = 100%). | `engine.zoomTo(0.8)` |
+| `panTo(x, y, ms?)` | Centers the view on a specific coordinate. | `engine.panTo(200, 300)` |
+| `fitToScreen(ms?)` | Autcalculated zoom/pan to show all objects. | `engine.fitToScreen(800)` |
+
+### 2. Node & Edge Management
+| API | Description | Usage Example |
+|---|---|---|
+| `addNode(config)` | Adds a node. Returns the generated or provided ID. | `const id = Zenode.addNode({ type: 'rectangle', ... })` |
+| `removeNode(id)` | Deletes a node and its connections. | `Zenode.removeNode('n1')` |
+| `updateNode(id, patch)` | Updates node data (position, meta). | `Zenode.updateNode('n1', { x: 200 })` |
+| `addEdge(config)` | Creates a connection. Supports `type` override. | `Zenode.addEdge({ ..., type: 's-shaped' })` |
+| `duplicateNode(id)` | Clones a node and its content. | `const newId = Zenode.duplicateNode('n1')` |
+| `focusNode(id, opts?)` | Animates the viewport to focus on a node. | `Zenode.focusNode('n1', { zoom: 1.5 })` |
+| `groupSelection()` | Encapsulates the current selection within a visual group. | `Zenode.groupSelection()` |
+| `ungroupSelection()` | Break apart active selection or selected group. | `Zenode.ungroupSelection()` |
+| `toggleGroupingSelection()`| Smart toggle grouping logic. | `Zenode.toggleGroupingSelection()` |
+| `getVisualGroups()` | Returns array of all active visual groups. | `Zenode.getVisualGroups()` |
+
+### 3. Data Serialization & Export
+| API | Description | Usage Example |
+|---|---|---|
+| `toXML()` | Exports current state as a Zenode XML string. | `const xml = Zenode.toXML()` |
+| `fromXML(xmlString)` | Restores the canvas from a Zenode XML string. | `Zenode.fromXML(myXml)` |
+| `toMermaid()` | Generates a Mermaid.js flowchart script. | `console.log(Zenode.toMermaid())` |
+| `toDOT()` | Generates a Graphviz/DOT language script. | `const dot = Zenode.toDOT()` |
+| `validate()` | Runs structural validation (cycles, orphans). | `const result = Zenode.validate()` |
+
+### 4. Visual Feedback & Status
+| API | Description | Usage Example |
+|---|---|---|
+| `setNodeStatus(id, type)` | Triggers visual cues (`running`, `success`, `error`). | `engine.setNodeStatus('n1', 'error')` |
+| `updateNodeContent(id, cnt)` | Sets text, icons, and layout for a node. | `Zenode.updateNodeContent('n1', { items: [...] })` |
+| `highlight(id, opts?)` | Pulses a node with target behavior/color. | `engine.highlight('n1', { color: '#ff0000', duration: 3000 })` |
+
+### 5. Placement & Interaction
+| API | Description | Usage Example |
+|---|---|---|
+| `startPlacement(type, id, data?)` | Enters placement mode with a ghost preview FOLLOWING the mouse. | `engine.startPlacement('rectangle', 'task0')` |
+| `updatePlacementPreview(e \| p)` | Manually updates the ghost preview's position (e.g. from DND `dragover`). | `engine.updatePlacementPreview(event)` |
+| `completePlacement(e \| p?)` | Adds the node and exits placement mode. | `engine.completePlacement(event)` |
+| `cancelPlacement()` | Aborts placement mode and removes preview (also mapped to `Escape`). | `engine.cancelPlacement()` |
+| `placeShapeAt(type, id, x, y)` | Immediately places a shape at exact canvas coordinates. | `engine.placeShapeAt('circle', 'c1', 100, 200)` |
+| `placeShapeAtSafePos(type, id)` | Finds the nearest non-overlapping spot in viewport to place a shape. | `engine.placeShapeAtSafePos('rectangle', 'r1')` |
+| `handleDrop(event)` | Native DND handler: parses drop data and places shape at mouse. | `container.ondrop = (e) => Zenode.handleDrop(e)` |
+
+> [!TIP]
+> **Deterministic IDs**: If you provide an `id` in `addNode(config)`, the engine will use it strictly. If not, it will return a UUID which you should captured for future calls.
+
+</details>
+
+---
+
+## 🌟 Support Zenode
+
+If you find this project useful, **please consider [leaving a Star](https://github.com/martinmanu/Zenode/stargazers) on  [<u>GitHub!</u>](https://github.com/martinmanu/Zenode) ⭐** It helps the project grow and motivates further development of the execution runtime.
+
+---
+
+<div align="center">
+
+**Built with D3.js · TypeScript .**
+ [<u>GitHub</u>](https://github.com/martinmanu/Zenode)
+
+</div>

package/dist/components/canvas/canvas.cjs

@@ -0,0 +1,106 @@
+'use strict';
+
+var defaultConfig = require('../../config/defaultConfig.cjs');
+var d3 = require('d3');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
+
+// src/components/canvas/drawCanvas.ts
+function drawCanvas(containerSelector, canvasConfig) {
+    const container = d3__namespace.select(containerSelector);
+    if (container.empty()) {
+        throw new Error(`Container '${containerSelector}' not found in DOM.`);
+    }
+    let canvasClasses = (canvasConfig === null || canvasConfig === void 0 ? void 0 : canvasConfig.canvasClasses) || defaultConfig.defaultConfig.canvas.canvasClasses;
+    (canvasConfig === null || canvasConfig === void 0 ? void 0 : canvasConfig.width) || defaultConfig.defaultConfig.canvas.width;
+    (canvasConfig === null || canvasConfig === void 0 ? void 0 : canvasConfig.height) || defaultConfig.defaultConfig.canvas.height;
+    const backgroundColor = (canvasConfig === null || canvasConfig === void 0 ? void 0 : canvasConfig.backgroundColor) || defaultConfig.defaultConfig.canvas.backgroundColor;
+    const svg = container
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", "100%")
+        .attr("class", canvasClasses.join(" "))
+        .style("background-color", backgroundColor)
+        .style("display", "block")
+        .attr("preserveAspectRatio", "xMidYMid meet");
+    const gridLayout = svg.append("g").attr("class", "grid");
+    const canvasContainerGroup = svg
+        .append("g")
+        .attr("class", "canvas-container");
+    const elementsGroup = canvasContainerGroup
+        .append("g")
+        .attr("class", "elements-group");
+    const visualGroupsGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "visual-groups");
+    const connectionsGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "connections");
+    const placedNodesGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "placed-nodes");
+    const ghostConnectionGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "ghost-connection")
+        .style("pointer-events", "none");
+    const ghostsGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "ghosts")
+        .style("pointer-events", "none");
+    const guidesGroup = canvasContainerGroup
+        .append("g")
+        .attr("class", "guides")
+        .style("pointer-events", "none");
+    const lassoGroup = canvasContainerGroup
+        .append("g")
+        .attr("class", "lasso")
+        .style("pointer-events", "none");
+    elementsGroup.style("pointer-events", "none");
+    return {
+        grid: gridLayout,
+        elements: elementsGroup,
+        svg: svg,
+        canvasContainer: canvasContainerGroup,
+        connections: connectionsGroup,
+        visualGroups: visualGroupsGroup,
+        ghostConnection: ghostConnectionGroup,
+        ghosts: ghostsGroup,
+        placedNodes: placedNodesGroup,
+        guides: guidesGroup,
+        lasso: lassoGroup,
+    };
+}
+function lockedCanvas(locked, svg, zoomBehaviour) {
+    if (locked) {
+        svg.on(".zoom", null); // Disable zoom and pan
+        svg.style("cursor", "default");
+        d3__namespace.selectAll(".shape, .connection").style("pointer-events", "none");
+    }
+    else {
+        svg.call(zoomBehaviour); // Enable zoom and pan
+        svg.style("cursor", "grab");
+        d3__namespace.selectAll(".shape, .connection").style("pointer-events", "all");
+    }
+    console.log(`Canvas ${locked ? "locked (Preview Mode)" : "unlocked (Edit Mode)"}`);
+}
+
+exports.drawCanvas = drawCanvas;
+exports.lockedCanvas = lockedCanvas;
+//# sourceMappingURL=canvas.cjs.map

package/dist/components/canvas/canvas.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.cjs","sources":["../../../src/components/canvas/canvas.ts"],"sourcesContent":[null],"names":["d3","defaultConfig"],"mappings":"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"}

package/dist/components/canvas/canvas.d.ts

@@ -0,0 +1,15 @@
+import { Canvas } from "../../model/configurationModel.js";
+export declare function drawCanvas(containerSelector: string, canvasConfig: Canvas): {
+    svg: any;
+    grid: any;
+    elements: any;
+    canvasContainer: any;
+    connections: any;
+    ghostConnection: any;
+    placedNodes: any;
+    visualGroups: any;
+    guides: any;
+    ghosts: any;
+    lasso: any;
+};
+export declare function lockedCanvas(locked: boolean, svg: any, zoomBehaviour: any): void;

package/dist/components/canvas/canvas.js

@@ -0,0 +1,84 @@
+import { defaultConfig } from '../../config/defaultConfig.js';
+import * as d3 from 'd3';
+
+// src/components/canvas/drawCanvas.ts
+function drawCanvas(containerSelector, canvasConfig) {
+    const container = d3.select(containerSelector);
+    if (container.empty()) {
+        throw new Error(`Container '${containerSelector}' not found in DOM.`);
+    }
+    let canvasClasses = (canvasConfig === null || canvasConfig === void 0 ? void 0 : canvasConfig.canvasClasses) || defaultConfig.canvas.canvasClasses;
+    (canvasConfig === null || canvasConfig === void 0 ? void 0 : canvasConfig.width) || defaultConfig.canvas.width;
+    (canvasConfig === null || canvasConfig === void 0 ? void 0 : canvasConfig.height) || defaultConfig.canvas.height;
+    const backgroundColor = (canvasConfig === null || canvasConfig === void 0 ? void 0 : canvasConfig.backgroundColor) || defaultConfig.canvas.backgroundColor;
+    const svg = container
+        .append("svg")
+        .attr("width", "100%")
+        .attr("height", "100%")
+        .attr("class", canvasClasses.join(" "))
+        .style("background-color", backgroundColor)
+        .style("display", "block")
+        .attr("preserveAspectRatio", "xMidYMid meet");
+    const gridLayout = svg.append("g").attr("class", "grid");
+    const canvasContainerGroup = svg
+        .append("g")
+        .attr("class", "canvas-container");
+    const elementsGroup = canvasContainerGroup
+        .append("g")
+        .attr("class", "elements-group");
+    const visualGroupsGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "visual-groups");
+    const connectionsGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "connections");
+    const placedNodesGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "placed-nodes");
+    const ghostConnectionGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "ghost-connection")
+        .style("pointer-events", "none");
+    const ghostsGroup = canvasContainerGroup
+        .insert("g", ".elements-group")
+        .attr("class", "ghosts")
+        .style("pointer-events", "none");
+    const guidesGroup = canvasContainerGroup
+        .append("g")
+        .attr("class", "guides")
+        .style("pointer-events", "none");
+    const lassoGroup = canvasContainerGroup
+        .append("g")
+        .attr("class", "lasso")
+        .style("pointer-events", "none");
+    elementsGroup.style("pointer-events", "none");
+    return {
+        grid: gridLayout,
+        elements: elementsGroup,
+        svg: svg,
+        canvasContainer: canvasContainerGroup,
+        connections: connectionsGroup,
+        visualGroups: visualGroupsGroup,
+        ghostConnection: ghostConnectionGroup,
+        ghosts: ghostsGroup,
+        placedNodes: placedNodesGroup,
+        guides: guidesGroup,
+        lasso: lassoGroup,
+    };
+}
+function lockedCanvas(locked, svg, zoomBehaviour) {
+    if (locked) {
+        svg.on(".zoom", null); // Disable zoom and pan
+        svg.style("cursor", "default");
+        d3.selectAll(".shape, .connection").style("pointer-events", "none");
+    }
+    else {
+        svg.call(zoomBehaviour); // Enable zoom and pan
+        svg.style("cursor", "grab");
+        d3.selectAll(".shape, .connection").style("pointer-events", "all");
+    }
+    console.log(`Canvas ${locked ? "locked (Preview Mode)" : "unlocked (Edit Mode)"}`);
+}
+
+export { drawCanvas, lockedCanvas };
+//# sourceMappingURL=canvas.js.map

package/dist/components/canvas/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sources":["../../../src/components/canvas/canvas.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}