@codefrydev/svg-engine 0.1.1 → 0.1.2
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 +55 -0
- package/dist/wc.iife.js +10 -299
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -40,6 +40,56 @@ registerRenderer("my_box", (el) => (
|
|
|
40
40
|
));
|
|
41
41
|
```
|
|
42
42
|
|
|
43
|
+
## Diagram data
|
|
44
|
+
|
|
45
|
+
The engine consumes an **`ElementData[]`** array. The TypeScript type is exported as **`Element`** from `@codefrydev/svg-engine` (see `ElementData` in `src/core/types.ts` in this repo).
|
|
46
|
+
|
|
47
|
+
Each element must include **`id`**, **`type`** (a built-in `ElementType` string or your custom type if you registered a renderer), and coordinates **`x1`**, **`y1`**, **`x2`**, **`y2`**. Common optional fields include **`label`**, **`value`**, **`color`**, **`strokeWidth`**, **`cps`** (control points for curves), plus many keys specific to thermo, circuits, graphs, waves, and so on.
|
|
48
|
+
|
|
49
|
+
### How to update data
|
|
50
|
+
|
|
51
|
+
| Surface | What to do |
|
|
52
|
+
|--------|------------|
|
|
53
|
+
| **`Renderer`** | Pass a new `elements` prop from React state; updates are fully driven by props. |
|
|
54
|
+
| **`Editor`** | Use **`onChange={(elements) => ...}`** to mirror edits into your app state. Imperatively, attach a ref and call **`getData()`**, **`setData(elements)`**, or **`clear()`**. **`initialElements`** sets the starting diagram; when that input changes (for example after switching preset examples), the editor **replaces** the canvas with the new array. |
|
|
55
|
+
| **Editor UI** | Select something and edit the **properties** panel. Open **Diagram Data (JSON)** in the header to paste JSON and click **Load Diagram**. **Copy JSON** exports the current array (and triggers **`onExport`** if you passed it). |
|
|
56
|
+
| **`<codefrydev-svg-engine>`** | Put a JSON array on the **`data`** attribute, or from JavaScript use **`setData(elements)`**, **`getData()`**, or **`element.elements = [...]`**. Listen for the **`change`** event: **`event.detail.elements`**. **`export`** fires when the user copies JSON. |
|
|
57
|
+
| **`<codefrydev-svg-engine-prev>`** (preview only) | Same idea: **`data`** attribute, **`setData`**, or **`elements`** setter; read-only render. |
|
|
58
|
+
|
|
59
|
+
### Standalone HTML (no React)
|
|
60
|
+
|
|
61
|
+
Use the web component bundle so you only need a normal HTML page plus a script tag.
|
|
62
|
+
|
|
63
|
+
1. **Load the bundle** (and Tailwind if you use the editor UI), then use the custom tags:
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<script src="https://unpkg.com/@codefrydev/svg-engine/dist/wc.iife.js"></script>
|
|
67
|
+
<!-- Editor UI expects Tailwind utilities, e.g. https://cdn.tailwindcss.com in demos -->
|
|
68
|
+
|
|
69
|
+
<codefrydev-svg-engine
|
|
70
|
+
id="diagram"
|
|
71
|
+
mode="inline"
|
|
72
|
+
preset="mechanics"
|
|
73
|
+
data='[{"id":1,"type":"block","x1":100,"y1":200,"x2":220,"y2":280}]'
|
|
74
|
+
></codefrydev-svg-engine>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
2. **Prefer JavaScript for large or dynamic JSON** — HTML attributes are awkward for big payloads; start with `data="[]"` (or omit `data` and rely on **`preset`**) and push data from script:
|
|
78
|
+
|
|
79
|
+
```html
|
|
80
|
+
<script>
|
|
81
|
+
const el = document.getElementById("diagram");
|
|
82
|
+
el.setData([
|
|
83
|
+
{ id: 1, type: "block", x1: 100, y1: 200, x2: 220, y2: 280, label: "m" }
|
|
84
|
+
]);
|
|
85
|
+
el.addEventListener("change", (e) => {
|
|
86
|
+
console.log(e.detail.elements); // full ElementData[] after each edit
|
|
87
|
+
});
|
|
88
|
+
</script>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
3. **Layout** — Custom elements are inline by default; give the host `display: block` (and width/height if needed) so the editor fills space. See `examples/playground/wc-demo.html` for editor + preview sync and loading the bundle from disk or a dev server.
|
|
92
|
+
|
|
43
93
|
## Tailwind
|
|
44
94
|
|
|
45
95
|
Editor UI uses Tailwind classes. Point your Tailwind `content` at this package’s `dist` files (e.g. `./node_modules/@codefrydev/svg-engine/dist/**/*.{js,cjs,mjs}`) so utilities are generated.
|
|
@@ -54,4 +104,9 @@ Loads React-included IIFE/ESM; registers `<codefrydev-svg-engine>` (editor) and
|
|
|
54
104
|
npm run typecheck
|
|
55
105
|
npm run build # lib + wc
|
|
56
106
|
cd examples/playground && npm run dev
|
|
107
|
+
npx playwright install chromium # once, for WC E2E
|
|
108
|
+
npm run test:e2e-wc # builds wc.iife.js + Chromium smoke test (local server)
|
|
109
|
+
# After publishing, optional: WC_SCRIPT_URL=https://unpkg.com/@codefrydev/svg-engine/dist/wc.iife.js npm run test:e2e-wc
|
|
57
110
|
```
|
|
111
|
+
|
|
112
|
+
**CDN note:** `wc.iife.js` must not reference Node’s `process` in the browser. This repo’s WC build sets `process.env.NODE_ENV` to `"production"` at bundle time; publish a new npm version if an older `wc.iife.js` throws `process is not defined`.
|