@misenkashari/excalidraw-utils 1.0.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 +99 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
# @excalidraw/utils
|
|
2
|
+
|
|
3
|
+
## Install
|
|
4
|
+
|
|
5
|
+
```bash
|
|
6
|
+
npm install @excalidraw/utils
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
If you prefer Yarn over npm, use this command to install the Excalidraw utils package:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
yarn add @excalidraw/utils
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## API
|
|
16
|
+
|
|
17
|
+
### `serializeAsJSON`
|
|
18
|
+
|
|
19
|
+
See [`serializeAsJSON`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#serializeAsJSON) for API and description.
|
|
20
|
+
|
|
21
|
+
### `exportToBlob` (async)
|
|
22
|
+
|
|
23
|
+
Export an Excalidraw diagram to a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob).
|
|
24
|
+
|
|
25
|
+
### `exportToSvg`
|
|
26
|
+
|
|
27
|
+
Export an Excalidraw diagram to a [SVGElement](https://developer.mozilla.org/en-US/docs/Web/API/SVGElement).
|
|
28
|
+
|
|
29
|
+
## Usage
|
|
30
|
+
|
|
31
|
+
Excalidraw utils is published as a UMD (Universal Module Definition). If you are using a module bundler (for instance, Webpack), you can import it as an ES6 module:
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
import { exportToSvg, exportToBlob } from "@excalidraw/utils";
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
To use it in a browser directly:
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<script src="https://unpkg.com/@excalidraw/utils@0.1.0/dist/excalidraw-utils.min.js"></script>
|
|
41
|
+
<script>
|
|
42
|
+
// ExcalidrawUtils is a global variable defined by excalidraw.min.js
|
|
43
|
+
const { exportToSvg, exportToBlob } = ExcalidrawUtils;
|
|
44
|
+
</script>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Here's the `exportToBlob` and `exportToSvg` functions in action:
|
|
48
|
+
|
|
49
|
+
```js
|
|
50
|
+
const excalidrawDiagram = {
|
|
51
|
+
type: "excalidraw",
|
|
52
|
+
version: 2,
|
|
53
|
+
source: "https://excalidraw.com",
|
|
54
|
+
elements: [
|
|
55
|
+
{
|
|
56
|
+
id: "vWrqOAfkind2qcm7LDAGZ",
|
|
57
|
+
type: "ellipse",
|
|
58
|
+
x: 414,
|
|
59
|
+
y: 237,
|
|
60
|
+
width: 214,
|
|
61
|
+
height: 214,
|
|
62
|
+
angle: 0,
|
|
63
|
+
strokeColor: "#000000",
|
|
64
|
+
backgroundColor: "#15aabf",
|
|
65
|
+
fillStyle: "hachure",
|
|
66
|
+
strokeWidth: 1,
|
|
67
|
+
strokeStyle: "solid",
|
|
68
|
+
roughness: 1,
|
|
69
|
+
opacity: 100,
|
|
70
|
+
groupIds: [],
|
|
71
|
+
roundness: null,
|
|
72
|
+
seed: 1041657908,
|
|
73
|
+
version: 120,
|
|
74
|
+
versionNonce: 1188004276,
|
|
75
|
+
isDeleted: false,
|
|
76
|
+
boundElementIds: null,
|
|
77
|
+
},
|
|
78
|
+
],
|
|
79
|
+
appState: {
|
|
80
|
+
viewBackgroundColor: "#ffffff",
|
|
81
|
+
gridSize: null,
|
|
82
|
+
},
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
// Export the Excalidraw diagram as SVG string
|
|
86
|
+
const svg = exportToSvg(excalidrawDiagram);
|
|
87
|
+
console.log(svg.outerHTML);
|
|
88
|
+
|
|
89
|
+
// Export the Excalidraw diagram as PNG Blob URL
|
|
90
|
+
(async () => {
|
|
91
|
+
const blob = await exportToBlob({
|
|
92
|
+
...excalidrawDiagram,
|
|
93
|
+
mimeType: "image/png",
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
const urlCreator = window.URL || window.webkitURL;
|
|
97
|
+
console.log(urlCreator.createObjectURL(blob));
|
|
98
|
+
})();
|
|
99
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@misenkashari/excalidraw-utils",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"types": "./dist/types/utils/src/index.d.ts",
|
|
6
|
+
"main": "./dist/prod/index.js",
|
|
7
|
+
"module": "./dist/prod/index.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/types/utils/src/index.d.ts",
|
|
11
|
+
"development": "./dist/dev/index.js",
|
|
12
|
+
"production": "./dist/prod/index.js",
|
|
13
|
+
"default": "./dist/prod/index.js"
|
|
14
|
+
},
|
|
15
|
+
"./*": {
|
|
16
|
+
"types": "./dist/types/utils/src/*.d.ts"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"files": [
|
|
20
|
+
"dist/*"
|
|
21
|
+
],
|
|
22
|
+
"description": "Excalidraw utility functions",
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"license": "MIT",
|
|
27
|
+
"keywords": [
|
|
28
|
+
"excalidraw",
|
|
29
|
+
"excalidraw-utils"
|
|
30
|
+
],
|
|
31
|
+
"browserslist": {
|
|
32
|
+
"production": [
|
|
33
|
+
">0.2%",
|
|
34
|
+
"not dead",
|
|
35
|
+
"not ie <= 11",
|
|
36
|
+
"not op_mini all",
|
|
37
|
+
"not safari < 12",
|
|
38
|
+
"not kaios <= 2.5",
|
|
39
|
+
"not edge < 79",
|
|
40
|
+
"not chrome < 70",
|
|
41
|
+
"not and_uc < 13",
|
|
42
|
+
"not samsung < 10"
|
|
43
|
+
],
|
|
44
|
+
"development": [
|
|
45
|
+
"last 1 chrome version",
|
|
46
|
+
"last 1 firefox version",
|
|
47
|
+
"last 1 safari version"
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
"dependencies": {
|
|
51
|
+
"@braintree/sanitize-url": "6.0.2",
|
|
52
|
+
"@excalidraw/laser-pointer": "1.3.1",
|
|
53
|
+
"browser-fs-access": "0.29.1",
|
|
54
|
+
"open-color": "1.9.1",
|
|
55
|
+
"pako": "2.0.3",
|
|
56
|
+
"perfect-freehand": "1.2.0",
|
|
57
|
+
"png-chunk-text": "1.0.0",
|
|
58
|
+
"png-chunks-encode": "1.0.0",
|
|
59
|
+
"png-chunks-extract": "1.0.0",
|
|
60
|
+
"roughjs": "4.6.4"
|
|
61
|
+
},
|
|
62
|
+
"devDependencies": {
|
|
63
|
+
"cross-env": "7.0.3",
|
|
64
|
+
"fonteditor-core": "2.4.0",
|
|
65
|
+
"typescript": "5.9.3",
|
|
66
|
+
"wawoff2": "2.0.1",
|
|
67
|
+
"which": "4.0.0"
|
|
68
|
+
},
|
|
69
|
+
"bugs": "https://github.com/kashari/excalidraw/issues",
|
|
70
|
+
"repository": "https://github.com/kashari/excalidraw",
|
|
71
|
+
"scripts": {
|
|
72
|
+
"gen:types": "rimraf types && tsc",
|
|
73
|
+
"build:esm": "rimraf dist && node ../../scripts/buildUtils.js && yarn gen:types"
|
|
74
|
+
}
|
|
75
|
+
}
|