f1ow 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -4
- package/dist/components/Canvas/ConnectionPoints.d.ts +2 -0
- package/dist/components/Canvas/TextHtmlOverlay.d.ts +12 -0
- package/dist/components/shapes/TextLabel.d.ts +1 -1
- package/dist/components/shapes/TextShape.d.ts +1 -0
- package/dist/f1ow-collaboration.js +3804 -0
- package/dist/f1ow.js +4580 -3179
- package/dist/f1ow.umd.cjs +5874 -3946
- package/dist/hooks/useFlowAnimation.d.ts +8 -0
- package/dist/lib/FlowCanvasProps.d.ts +31 -1
- package/dist/lib/collaboration.d.ts +10 -0
- package/dist/lib/index.d.ts +7 -10
- package/dist/store/CanvasStoreContext.d.ts +14 -0
- package/dist/store/useCanvasStore.d.ts +32 -0
- package/dist/syncBridge-CveP4QyQ.js +428 -0
- package/dist/types/index.d.ts +97 -1
- package/dist/utils/connection.d.ts +30 -2
- package/dist/utils/editable.d.ts +2 -0
- package/dist/utils/elbow.d.ts +41 -8
- package/dist/utils/labelMetrics.d.ts +21 -0
- package/dist/utils/markdown.d.ts +14 -0
- package/dist/utils/markdownEditing.d.ts +1 -0
- package/dist/utils/textBinding.d.ts +18 -0
- package/dist/utils/textStyleTargets.d.ts +6 -0
- package/dist/yjsProvider-mWrSFiNG.js +100 -0
- package/package.json +121 -107
package/README.md
CHANGED
|
@@ -20,15 +20,16 @@
|
|
|
20
20
|
|
|
21
21
|
## ✨ Features
|
|
22
22
|
|
|
23
|
-
- **
|
|
24
|
-
- **Smart Connectors** — Arrows and lines snap to shapes with auto-routing (sharp, curved, elbow).
|
|
23
|
+
- **9 Drawing Tools + Navigation** — Rectangle, Ellipse, Diamond, Line, Arrow, Free Draw, Text, Image, Eraser, plus Select and Hand tools.
|
|
24
|
+
- **Smart Connectors** — Arrows and lines snap to shapes with auto-routing (sharp, curved, elbow with obstacle-aware fallback).
|
|
25
25
|
- **11 Arrowhead Variants** — Triangle, circle, diamond, bar, crow's foot (ERD), and more.
|
|
26
26
|
- **Selection & Transform** — Click, drag, resize, rotate, multi-select, group/ungroup, lock/unlock.
|
|
27
27
|
- **Pan & Zoom** — Hand tool, scroll-wheel, trackpad pinch, zoom-to-fit, zoom-to-selection.
|
|
28
28
|
- **Rich Styling** — Stroke, fill, width, dash, opacity, roughness, fonts.
|
|
29
|
+
- **Markdown Text** — Text elements render markdown (bold, italic, lists, links, code) with inline editing via double-click.
|
|
29
30
|
- **Customizable UI** — Floating toolbar (top/bottom/hidden), style panel, context menu.
|
|
30
|
-
- **Undo / Redo** — 100-step history
|
|
31
|
-
- **Export** — Export canvas to PNG, SVG, or JSON.
|
|
31
|
+
- **Undo / Redo** — 100-step diff-based history system.
|
|
32
|
+
- **Export** — Export canvas to PNG, SVG (with graceful fallback), or JSON.
|
|
32
33
|
- **Real-Time Collaboration** — Optional CRDT via Yjs (experimental) with cursor presence.
|
|
33
34
|
- **Plugin / Extension System** — Register custom element types with per-type validation and default values.
|
|
34
35
|
- **Element Validation** — Every mutation path (add, update, import) is validated; invalid elements are rejected gracefully.
|
|
@@ -36,6 +37,10 @@
|
|
|
36
37
|
- **Zero CSS Dependencies** — No external stylesheets required. Inline styled.
|
|
37
38
|
- **TypeScript** — Full type safety with strict mode.
|
|
38
39
|
|
|
40
|
+
> **Multi-instance support (preview):** `createCanvasStore()` and `<CanvasStoreProvider>` let React subscribers (`<FlowCanvas>`, toolbar, style panel, overlays) operate on independent stores. Tools, keyboard shortcuts, and the collaboration sync bridge still read from the singleton store via `getState()`, so full per-instance isolation across those subsystems is a follow-up phase. Until then, mounting multiple editable `<FlowCanvas>` instances on the same page is supported for layout/preview use cases but tool input and collaboration target the singleton.
|
|
41
|
+
>
|
|
42
|
+
> **Optional collaboration peers:** `yjs` and `y-websocket` are loaded via dynamic `import()` and ship in separate chunks. Apps that never enable collaboration do not need either package installed when consuming the ESM build. Lower-level CRDT APIs (`createCollaborationProvider`, `startSync`, `CollaborationManager`, codec helpers) live under the `f1ow/collaboration` subpath; the root `f1ow` entry only re-exports types, the `useCollaboration` hook (lazy), and `CursorOverlay`.
|
|
43
|
+
|
|
39
44
|
## 📦 Installation
|
|
40
45
|
|
|
41
46
|
```bash
|
|
@@ -6,6 +6,8 @@ interface Props {
|
|
|
6
6
|
snapTarget: SnapTarget | null;
|
|
7
7
|
/** Whether to render at all (only during line/arrow tool) */
|
|
8
8
|
visible: boolean;
|
|
9
|
+
/** Whether to render the center binding indicator */
|
|
10
|
+
showCenterIndicator?: boolean;
|
|
9
11
|
/** Accent color */
|
|
10
12
|
color?: string;
|
|
11
13
|
/** Current viewport scale for LOD */
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ViewportState, TextElement } from '../../types';
|
|
3
|
+
export interface TextHtmlOverlayProps {
|
|
4
|
+
viewport: ViewportState;
|
|
5
|
+
autoEditTextId: string | null;
|
|
6
|
+
onEditStart: (id: string) => void;
|
|
7
|
+
onEditEnd: (id: string, isEmpty: boolean) => void;
|
|
8
|
+
onChange: (id: string, updates: Partial<TextElement>) => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const TextHtmlOverlay: React.FC<TextHtmlOverlayProps>;
|
|
11
|
+
export declare function isStylePanelTarget(target: EventTarget | null): boolean;
|
|
12
|
+
export declare function shouldKeepEditingOnBlur(relatedTarget: EventTarget | null, activeElement: EventTarget | null): boolean;
|
|
@@ -5,7 +5,7 @@ export interface TextLabelProps {
|
|
|
5
5
|
/** The parent connector element (arrow or line) */
|
|
6
6
|
connector: ArrowElement | LineElement;
|
|
7
7
|
onChange: (id: string, updates: Partial<TextElement>) => void;
|
|
8
|
-
/** If true, auto-opens the
|
|
8
|
+
/** If true, auto-opens the editor immediately after mount */
|
|
9
9
|
autoEdit?: boolean;
|
|
10
10
|
/** Called to notify parent that text editing started */
|
|
11
11
|
onEditStart?: (id: string) => void;
|
|
@@ -6,6 +6,7 @@ interface Props {
|
|
|
6
6
|
/** When true, individual drag is disabled — the parent KonvaGroup handles dragging */
|
|
7
7
|
isGrouped?: boolean;
|
|
8
8
|
onSelect: (id: string) => void;
|
|
9
|
+
onDoubleClick?: (id: string) => void;
|
|
9
10
|
onChange: (id: string, updates: Partial<TextElement>) => void;
|
|
10
11
|
onDragMove?: (id: string, updates: Partial<TextElement>) => void;
|
|
11
12
|
/** If true, auto-opens the textarea editor immediately after mount */
|