@veztraa/report-designer 0.3.1 → 0.3.3
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 +34 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
**[Documentation & Live Demo →](https://report-forge.veztraa.com)**
|
|
4
4
|
|
|
5
|
-
Embeddable React drag-and-drop PDF report designer
|
|
5
|
+
Embeddable React drag-and-drop PDF report designer for any React app. Features a **signature element** (draw on pad, type in handwriting font, or upload an image), **multilingual text** (Chinese, Japanese, Korean, Arabic, Hebrew, Hindi, Thai via Noto fonts), **repeating container bands**, live PDF preview, 50-step undo/redo, dark mode, and `{{field}}` data bindings.
|
|
6
6
|
|
|
7
7
|
Styles auto-inject on mount — no CSS import required.
|
|
8
8
|
|
|
@@ -105,13 +105,15 @@ Passed as the `elements` prop. Use `include` (whitelist) **or** `exclude` (black
|
|
|
105
105
|
| `include` | `ElementType[]` | Only these types appear, in this order. |
|
|
106
106
|
| `exclude` | `ElementType[]` | Hide these types (ignored when `include` is set). |
|
|
107
107
|
|
|
108
|
-
`ElementType` is one of: `text
|
|
108
|
+
`ElementType` is one of: `text` · `richtext` · `table` · `container` · `image` · `chart` · `barcode` · `qrcode` · `rectangle` · `line` · `pagebreak` · `signature`
|
|
109
109
|
|
|
110
110
|
## Features
|
|
111
111
|
|
|
112
112
|
- **Drag-and-drop canvas** — snap-to-grid with alignment guides, 8-handle resize, arrow-key nudge
|
|
113
113
|
- **Live PDF preview rendered off the main thread** (Web Worker) — debounced 400ms with an adaptive loading UI, so even large multi-hundred-page reports never freeze the tab
|
|
114
114
|
- **Repeating containers** (data-bound bands) with **automatic pagination** — tables, rich text, and bands flow across pages, keeping items together where they fit
|
|
115
|
+
- **Signature element** — draw on a pad, type a name in a handwriting font (Great Vibes, Dancing Script, Pacifico, Sacramento), or upload an image; editable after creation
|
|
116
|
+
- **Multilingual text** — set `fontFamily` to any Noto font to render Chinese, Japanese, Korean, Arabic, Hebrew, Hindi, Thai, or Latin/Cyrillic/Greek content in the same PDF
|
|
115
117
|
- **50-step undo / redo**
|
|
116
118
|
- **Light / dark theme** and a fully customizable accent color
|
|
117
119
|
- Header, body, and footer sections
|
|
@@ -119,6 +121,36 @@ Passed as the `elements` prop. Use `include` (whitelist) **or** `exclude` (black
|
|
|
119
121
|
- Data panel for `{{field}}` preview bindings
|
|
120
122
|
- **JSON-first** — the designer is a visual editor for a plain `Template` object; load with `report`, save with `toolbar.onSave`
|
|
121
123
|
|
|
124
|
+
## Signature element
|
|
125
|
+
|
|
126
|
+
Add a signature block from the palette (or include `type: "signature"` in your template). In the Properties panel you can:
|
|
127
|
+
|
|
128
|
+
- **Draw** — freehand on a signature pad, then click Use
|
|
129
|
+
- **Type** — enter a name displayed in a handwriting font (Great Vibes, Dancing Script, Pacifico, or Sacramento)
|
|
130
|
+
- **Upload** — paste or upload a signature image (PNG/JPEG)
|
|
131
|
+
- Set signer **name**, **title**, **label**, and **date** sub-fields
|
|
132
|
+
- Choose **alignment** (left / center / right), **ink color**, and **line color**
|
|
133
|
+
- Toggle the baseline rule on/off
|
|
134
|
+
|
|
135
|
+
Drawn signatures are stored as base64 PNGs inside the template JSON and render identically in the PDF.
|
|
136
|
+
|
|
137
|
+
## Multilingual support
|
|
138
|
+
|
|
139
|
+
Set `style.fontFamily` on any text element to a Noto family to render non-Latin scripts:
|
|
140
|
+
|
|
141
|
+
| Font family | Script |
|
|
142
|
+
|---|---|
|
|
143
|
+
| `Noto Sans` | Latin, Cyrillic, Greek |
|
|
144
|
+
| `Noto Sans SC` | Chinese Simplified |
|
|
145
|
+
| `Noto Sans JP` | Japanese |
|
|
146
|
+
| `Noto Sans KR` | Korean |
|
|
147
|
+
| `Noto Sans Arabic` | Arabic |
|
|
148
|
+
| `Noto Sans Hebrew` | Hebrew |
|
|
149
|
+
| `Noto Sans Devanagari` | Hindi |
|
|
150
|
+
| `Noto Sans Thai` | Thai |
|
|
151
|
+
|
|
152
|
+
Fonts are loaded from CDN on first use and are available in both the canvas preview and the rendered PDF. CJK fonts include automatic per-character line-breaking.
|
|
153
|
+
|
|
122
154
|
## Keyboard shortcuts
|
|
123
155
|
|
|
124
156
|
| Shortcut | Action |
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veztraa/report-designer",
|
|
3
|
-
"version": "0.3.
|
|
4
|
-
"description": "Embeddable React drag-and-drop PDF report designer — visual canvas, live preview, undo/redo, dark mode, and data-bound
|
|
3
|
+
"version": "0.3.3",
|
|
4
|
+
"description": "Embeddable React drag-and-drop PDF report designer — visual canvas, live preview, undo/redo, dark mode, signature element (draw/type/upload), handwriting fonts, multilingual Noto fonts, and data-bound repeating containers.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"pdf",
|
|
7
7
|
"pdf-designer",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"zustand": "^5.0.2",
|
|
47
|
-
"@veztraa/report-core": "0.3.
|
|
48
|
-
"@veztraa/report-renderer": "^0.3.
|
|
47
|
+
"@veztraa/report-core": "0.3.3",
|
|
48
|
+
"@veztraa/report-renderer": "^0.3.3"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@react-pdf/renderer": "^4.1.6",
|