@d3-polytree/editor 0.2.0 → 0.3.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 +36 -0
- package/dist/editor.umd.js +6 -6
- package/dist/editor.umd.js.map +1 -1
- package/dist/index.cjs +89 -10
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +31 -5
- package/dist/index.d.ts +31 -5
- package/dist/index.js +89 -10
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# @d3-polytree/editor
|
|
2
|
+
|
|
3
|
+
The full polytree **editor** — the [`@d3-polytree/interactive-viewer`](../interactive-viewer) plus the
|
|
4
|
+
editing layer: element dragging, the create/save/delete modelling flows, the palette toolbar, and the
|
|
5
|
+
**properties panel**.
|
|
6
|
+
|
|
7
|
+
**[▶ Live demo](https://davcs86.github.io/d3-polytree/?path=/story/components-editor--initial-diagram)** in Storybook.
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
pnpm add @d3-polytree/editor d3-selection d3-zoom d3-transition d3-scale d3-axis d3-drag
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
```ts
|
|
14
|
+
import { Editor } from '@d3-polytree/editor';
|
|
15
|
+
import '@d3-polytree/interactive-viewer/style.css'; // side-tabs + search panels
|
|
16
|
+
import '@d3-polytree/editor/style.css'; // properties panel
|
|
17
|
+
|
|
18
|
+
const editor = new Editor({ container: document.getElementById('app')! });
|
|
19
|
+
await editor.createDiagram(); // open the starter diagram
|
|
20
|
+
const node = editor.createNode({ type: 'default', position: { x: 80, y: 80 } });
|
|
21
|
+
editor.select(node);
|
|
22
|
+
editor.deleteSelected();
|
|
23
|
+
const xml = editor.exportDiagram(); // serialize to .pfdn
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
The **properties-panel** feature is bundled into this package and re-exported (`propertiesPanelModule`,
|
|
27
|
+
`entryFactoryModule`, `pfdnPropertiesProviderModule`). Layer in custom engine modules — a feature, a
|
|
28
|
+
custom node-type drawer, an [icon pack](../icons-amazon) — through the `modules` constructor option;
|
|
29
|
+
see the Storybook **[Guides/Kitchensink](https://davcs86.github.io/d3-polytree/?path=/story/guides-kitchensink--extending-the-library)**
|
|
30
|
+
story. Ships ESM + CJS + `.d.ts`, a self-contained **UMD**
|
|
31
|
+
bundle (global `d3PolytreeEditor`), and compiled **CSS** at `./style.css`. Part of the
|
|
32
|
+
[d3-polytree](https://github.com/davcs86/d3-polytree) monorepo.
|
|
33
|
+
|
|
34
|
+
## License
|
|
35
|
+
|
|
36
|
+
MIT
|