@jeevandev/flow-canvas 0.0.1

package/README.md

@@ -0,0 +1,116 @@
+# Flow Canvas
+
+A powerful, dual-mode React diagramming library that combines free-form design tools (like Canva) with structured node-based workflows 
+
+![Demo](https://i.ibb.co/xSzsMgR0/flow.png) <!-- Replace with actual demo image if available -->
+
+## Features
+
+- **Dual-Mode Engine**: 
+  - **Design Mode**: Free-form resizing, rotating, and snapping for design elements.
+  - **Workflow Mode**: Structured nodes with handles and strict connection logic.
+- **Infinite Canvas**: Zoomable, pannable, and virtually infinite workspace.
+- **Performance Optimized**: Viewport culling (virtualization) for thousands of nodes and edges.
+- **Customizable**: Fully stylable nodes and edges using standard CSS/SCSS.
+- **Interactive**: Drag, drop, resize, rotate, and connect interactions built-in.
+
+## Installation
+
+```bash
+npm install flow-canvas
+```
+
+## Basic Usage
+
+Wrap your application in the `Editor` context and render the `Canvas`.
+
+```tsx
+import React from 'react';
+import { Editor, Canvas, NodeLayer } from 'flow-canvas';
+import 'flow-canvas/style.css'; // Import default styles
+
+// 1. Define Nodes
+const initialNodes = [
+  { id: '1', type: 'default', x: 100, y: 100, data: { label: 'Node A' } },
+  { id: '2', type: 'input', x: 400, y: 200, data: { label: 'Node B' } }
+];
+
+// 2. Define Edges
+const initialEdges = [
+  { id: 'e1', source: '1', target: '2' }
+];
+
+const App = () => {
+  return (
+    <div style={{ width: '100vw', height: '100vh' }}>
+      <Editor initialNodes={initialNodes} initialEdges={initialEdges}>
+        <Canvas>
+             <NodeLayer />
+        </Canvas>
+      </Editor>
+    </div>
+  );
+};
+```
+
+## Configuration
+
+You can customize the editor behavior via the `config` prop:
+
+```tsx
+<Editor
+  config={{
+    viewOnly: false,
+    pan: true,
+    zoom: true,
+    snapping: true,
+    showGrid: true,
+    gridSize: 20,
+    gridColor: '#e5e7eb',
+    snapGuide: true, // Visual alignment guides
+    isLimited: false, // Infinite canvas if false
+  }}
+>
+  ...
+</Editor>
+```
+
+## Creating Custom Nodes
+
+### Design Node (Resizable & Rotatable)
+Any node with `resizable: true` or `rotatable: true` automatically gets the Design wrappers.
+
+```tsx
+const nodes = [
+  {
+    id: 'design-1',
+    type: 'custom',
+    x: 100, y: 100, 
+    width: 200, height: 200,
+    resizable: true,
+    rotatable: true,
+    doubleClickToEdit: true, // Prevents interaction until double-click
+    data: { ... }
+  }
+];
+```
+
+### Workflow Node (Logic & Connections)
+Standard nodes usually just need handles.
+
+```tsx
+// Custom Component
+const MyNode = ({ data }) => {
+  return (
+    <div className="my-node">
+       <Handle type="target" position="left" />
+       {data.label}
+       <Handle type="source" position="right" />
+    </div>
+  );
+};
+```
+
+## License
+
+MIT

package/dist/flow-canvas.css

@@ -0,0 +1 @@
+.ce-editor{position:relative;width:100%;height:100%;overflow:hidden;background-color:#f3f4f6}.ce-editor__canvas{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none;transform-origin:0 0}.ce-editor__viewport{width:100%;height:100%;overflow:hidden}.ce-editor__viewport--panning{cursor:grab!important}.ce-editor__viewport--panning *{pointer-events:none!important}.ce-editor__grid-layer{position:absolute;top:-50000px;left:-50000px;width:100000px;height:100000px;opacity:.5;pointer-events:none;z-index:0}.ce-editor__content-area{position:absolute;left:0;top:0;background-color:#fff;overflow:hidden;z-index:1;box-shadow:0 0 20px #0000001a}.ce-editor__infinite-area{position:relative;z-index:1}.ce-element{position:absolute;touch-action:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;transition:box-shadow .1s}.ce-element--selected{outline:2px solid #3b82f6;outline-width:calc(2px * var(--ce-inverse-zoom, 1));box-shadow:0 0 0 calc(4px * var(--ce-inverse-zoom, 1)) #3b82f633;z-index:100!important}.ce-element img{pointer-events:none;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}.ce-editor--connecting{cursor:crosshair!important}.ce-editor--connecting .ce-element:hover{outline:2px dashed #3b82f6;outline-width:calc(2px * var(--ce-inverse-zoom, 1));background-color:#3b82f60d;cursor:copy}.ce-editor--connecting .ce-handle:hover{transform:scale(1.5);background-color:#3b82f6!important;border-color:#fff!important;transition:transform .1s}.ce-resize-handle{width:calc(10px * var(--ce-inverse-zoom, 1));height:calc(10px * var(--ce-inverse-zoom, 1));background:#fff;border:calc(1px * var(--ce-inverse-zoom, 1)) solid #3b82f6;position:absolute;z-index:101}.ce-resize-handle--nw{top:calc(-6px * var(--ce-inverse-zoom, 1));left:calc(-6px * var(--ce-inverse-zoom, 1));cursor:nw-resize}.ce-resize-handle--ne{top:calc(-6px * var(--ce-inverse-zoom, 1));right:calc(-6px * var(--ce-inverse-zoom, 1));cursor:ne-resize}.ce-resize-handle--sw{bottom:calc(-6px * var(--ce-inverse-zoom, 1));left:calc(-6px * var(--ce-inverse-zoom, 1));cursor:sw-resize}.ce-resize-handle--se{bottom:calc(-6px * var(--ce-inverse-zoom, 1));right:calc(-6px * var(--ce-inverse-zoom, 1));cursor:se-resize}.ce-resize-handle--n{top:calc(-6px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:n-resize}.ce-resize-handle--s{bottom:calc(-6px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:s-resize}.ce-resize-handle--e{right:calc(-6px * var(--ce-inverse-zoom, 1));top:50%;transform:translateY(-50%);cursor:e-resize}.ce-resize-handle--w{left:calc(-6px * var(--ce-inverse-zoom, 1));top:50%;transform:translateY(-50%);cursor:w-resize}.ce-rotate-handle{width:calc(24px * var(--ce-inverse-zoom, 1));height:calc(24px * var(--ce-inverse-zoom, 1));background:#fff;border:none;box-shadow:0 2px 4px #0003;border-radius:50%;position:absolute;top:auto;bottom:calc(-35px * var(--ce-inverse-zoom, 1));left:50%;transform:translate(-50%);cursor:grab;z-index:101;display:flex;align-items:center;justify-content:center;color:#555}.ce-rotate-handle:after{display:none}.ce-rotate-handle:active{cursor:grabbing;background:#f3f4f6;color:#000}.ce-drag-handle-minimal{width:calc(24px * var(--ce-inverse-zoom, 1));height:calc(24px * var(--ce-inverse-zoom, 1));position:absolute;top:auto;bottom:calc(-35px * var(--ce-inverse-zoom, 1));left:calc(50% + calc(30px * var(--ce-inverse-zoom, 1)));transform:translate(-50%);background-color:#fff;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:grab;z-index:102;display:flex;align-items:center;justify-content:center;color:#555;background-image:none}.ce-drag-handle-minimal:active{cursor:grabbing;background-color:#f3f4f6;color:#000}.ce-snap-guide{position:absolute;background-color:#f0f;pointer-events:none;z-index:200}.ce-snap-guide--vertical{width:1px;height:100vh}.ce-snap-guide--horizontal{height:1px;width:100vw}.ce-node-default,.ce-node-input,.ce-node-output{background:#fff;border:1px solid #777;border-radius:4px;padding:10px;min-width:180px;text-align:center;font-size:14px;color:#222;box-shadow:0 1px 4px #0000001a;position:relative}.ce-node-input{border-color:#3b82f6}.ce-node-output{border-color:#10b981}.ce-node-content{pointer-events:none}.ce-handle{width:10px;height:10px;background:#fff;border-radius:50%;position:absolute;border:3px solid #777;z-index:10;cursor:crosshair;transition:border-color .2s}.ce-handle--left{left:0;transform:translate(-50%)}.ce-handle--right{right:0;transform:translate(50%)}.ce-handle--top{top:0;transform:translateY(-50%)}.ce-handle--bottom{bottom:0;transform:translateY(50%)}.ce-workflow-node:hover .ce-delete-node-btn{opacity:1;pointer-events:auto}.ce-delete-node-btn{position:absolute;top:-8px;right:-8px;width:18px;height:18px;background:#ff4d4f;color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;line-height:1;padding:0;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s,transform .1s;box-shadow:0 2px 4px #0000001a}.ce-delete-node-btn:hover{transform:scale(1.1);background:#ff7875}.ce-edge-group .ce-edge-delete-fo{opacity:0;pointer-events:none;transition:opacity .2s}.ce-edge-group:hover .ce-edge-delete-fo{opacity:1;pointer-events:auto}.ce-connection-line{animation:dashdraw .5s linear infinite}@keyframes dashdraw{0%{stroke-dashoffset:10}to{stroke-dashoffset:0}}