js-draw 1.17.0 → 1.18.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 +70 -10
- package/dist/bundle.js +2 -2
- package/dist/cjs/Editor.d.ts +18 -20
- package/dist/cjs/Editor.js +5 -2
- package/dist/cjs/components/AbstractComponent.d.ts +17 -5
- package/dist/cjs/components/AbstractComponent.js +15 -15
- package/dist/cjs/components/Stroke.d.ts +4 -1
- package/dist/cjs/components/Stroke.js +158 -2
- package/dist/cjs/components/builders/PolylineBuilder.d.ts +1 -1
- package/dist/cjs/components/builders/PolylineBuilder.js +9 -2
- package/dist/cjs/components/builders/PressureSensitiveFreehandLineBuilder.d.ts +1 -1
- package/dist/cjs/components/builders/PressureSensitiveFreehandLineBuilder.js +44 -51
- package/dist/cjs/image/EditorImage.js +1 -1
- package/dist/cjs/localizations/de.js +1 -1
- package/dist/cjs/localizations/es.js +1 -1
- package/dist/cjs/testing/createEditor.d.ts +2 -2
- package/dist/cjs/testing/createEditor.js +2 -2
- package/dist/cjs/toolbar/IconProvider.d.ts +3 -1
- package/dist/cjs/toolbar/IconProvider.js +15 -3
- package/dist/cjs/toolbar/localization.d.ts +6 -1
- package/dist/cjs/toolbar/localization.js +7 -2
- package/dist/cjs/toolbar/widgets/EraserToolWidget.d.ts +6 -1
- package/dist/cjs/toolbar/widgets/EraserToolWidget.js +45 -5
- package/dist/cjs/toolbar/widgets/PenToolWidget.js +10 -3
- package/dist/cjs/toolbar/widgets/PenToolWidget.test.d.ts +1 -0
- package/dist/cjs/toolbar/widgets/keybindings.js +1 -1
- package/dist/cjs/tools/Eraser.d.ts +24 -4
- package/dist/cjs/tools/Eraser.js +107 -20
- package/dist/cjs/tools/PasteHandler.js +0 -1
- package/dist/cjs/tools/lib.d.ts +1 -4
- package/dist/cjs/tools/lib.js +2 -4
- package/dist/cjs/version.js +1 -1
- package/dist/mjs/Editor.d.ts +18 -20
- package/dist/mjs/Editor.mjs +5 -2
- package/dist/mjs/components/AbstractComponent.d.ts +17 -5
- package/dist/mjs/components/AbstractComponent.mjs +15 -15
- package/dist/mjs/components/Stroke.d.ts +4 -1
- package/dist/mjs/components/Stroke.mjs +159 -3
- package/dist/mjs/components/builders/PolylineBuilder.d.ts +1 -1
- package/dist/mjs/components/builders/PolylineBuilder.mjs +10 -3
- package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.d.ts +1 -1
- package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.mjs +45 -52
- package/dist/mjs/image/EditorImage.mjs +1 -1
- package/dist/mjs/localizations/de.mjs +1 -1
- package/dist/mjs/localizations/es.mjs +1 -1
- package/dist/mjs/testing/createEditor.d.ts +2 -2
- package/dist/mjs/testing/createEditor.mjs +2 -2
- package/dist/mjs/toolbar/IconProvider.d.ts +3 -1
- package/dist/mjs/toolbar/IconProvider.mjs +15 -3
- package/dist/mjs/toolbar/localization.d.ts +6 -1
- package/dist/mjs/toolbar/localization.mjs +7 -2
- package/dist/mjs/toolbar/widgets/EraserToolWidget.d.ts +6 -1
- package/dist/mjs/toolbar/widgets/EraserToolWidget.mjs +47 -6
- package/dist/mjs/toolbar/widgets/PenToolWidget.mjs +10 -3
- package/dist/mjs/toolbar/widgets/PenToolWidget.test.d.ts +1 -0
- package/dist/mjs/toolbar/widgets/keybindings.mjs +1 -1
- package/dist/mjs/tools/Eraser.d.ts +24 -4
- package/dist/mjs/tools/Eraser.mjs +107 -21
- package/dist/mjs/tools/PasteHandler.mjs +0 -1
- package/dist/mjs/tools/lib.d.ts +1 -4
- package/dist/mjs/tools/lib.mjs +1 -4
- package/dist/mjs/version.mjs +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
@@ -15,15 +15,13 @@
|
|
15
15
|
|
16
16
|
For example usage, see [one of the examples](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md) or read [the documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/).
|
17
17
|
|
18
|
-
If you're coming from version 0.25, [read the migration guide!](https://js-draw.web.app/typedoc/modules/Additional_Documentation.MigratingToVersion1__.html)
|
19
|
-
|
20
18
|
# API
|
21
19
|
|
22
20
|
## Creating an `Editor`
|
23
21
|
|
24
22
|
### With a bundler that supports importing `.css` files
|
25
23
|
|
26
|
-
To create a new `Editor` and add it as a child of `document.body`,
|
24
|
+
To create a new `Editor` and add it as a child of `document.body`, use the [Editor](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#constructor) constructor:
|
27
25
|
```ts
|
28
26
|
import Editor from 'js-draw';
|
29
27
|
import 'js-draw/styles';
|
@@ -62,12 +60,12 @@ If you're not using a bundler, consider using the pre-bundled editor:
|
|
62
60
|
|
63
61
|
## Adding a toolbar
|
64
62
|
|
65
|
-
To create a toolbar with the default tools:
|
63
|
+
To create a toolbar with buttons for the default tools:
|
66
64
|
```ts
|
67
65
|
const toolbar = editor.addToolbar();
|
68
66
|
```
|
69
67
|
|
70
|
-
Save and exit buttons can be added with the `.addSaveButton` and `.addExitButton` methods:
|
68
|
+
Save and exit buttons can be added with the [`.addSaveButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.AbstractToolbar.html#addSaveButton) and [`.addExitButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.AbstractToolbar.html#addExitButton) methods:
|
71
69
|
```ts
|
72
70
|
toolbar.addSaveButton(() => {
|
73
71
|
const svgElem = editor.toSVG();
|
@@ -98,7 +96,7 @@ toolbar.addActionButton({
|
|
98
96
|
});
|
99
97
|
```
|
100
98
|
|
101
|
-
## Loading from
|
99
|
+
## Loading from SVG
|
102
100
|
|
103
101
|
```ts
|
104
102
|
editor.loadFromSVG(`
|
@@ -111,7 +109,7 @@ editor.loadFromSVG(`
|
|
111
109
|
`);
|
112
110
|
```
|
113
111
|
|
114
|
-
**Note**: While `js-draw` supports a small subset of the SVG markup language, it tries to preserve unrecognised SVG elements.
|
112
|
+
**Note**: While `js-draw` supports only a small subset of the SVG markup language, it tries to preserve unrecognised SVG elements.
|
115
113
|
|
116
114
|
For example, although `js-draw` doesn't support `<circle/>` elements,
|
117
115
|
```xml
|
@@ -134,6 +132,51 @@ but exports to
|
|
134
132
|
|
135
133
|
which **does** contain the `<circle/>` element.
|
136
134
|
|
135
|
+
## Customizing the background
|
136
|
+
|
137
|
+
The background color and style can be customized with [editor.setBackgroundStyle](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#setBackgroundStyle). For example,
|
138
|
+
```ts
|
139
|
+
import { Editor, Color4, BackgroundComponentBackgroundType } from 'js-draw';
|
140
|
+
const editor = new Editor(document.body);
|
141
|
+
|
142
|
+
editor.dispatch(editor.setBackgroundStyle({
|
143
|
+
color: Color4.orange,
|
144
|
+
type: BackgroundComponentBackgroundType.Grid,
|
145
|
+
}));
|
146
|
+
```
|
147
|
+
|
148
|
+
Above, we use `editor.dispatch` because `setBackgroundStyle` returns a [`Command`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Command.html), rather than changing the background style directly. `js-draw` uses `Command`s to track actions that can be undone and redone.
|
149
|
+
|
150
|
+
By default, `.dispatch` adds `Command`s to the undo stack. To avoid this, pass `false` for the second parameter to [`.dispatch`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#dispatch):
|
151
|
+
```ts
|
152
|
+
const addToHistory = false;
|
153
|
+
editor.dispatch(editor.setBackgroundStyle({
|
154
|
+
color: Color4.orange,
|
155
|
+
type: BackgroundComponentBackgroundType.Grid,
|
156
|
+
}), addToHistory);
|
157
|
+
```
|
158
|
+
|
159
|
+
### Making the background fill the screen
|
160
|
+
|
161
|
+
By default, the background has a fixed size and marks the region that will be saved by [`.toSVG`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toSVG) or [`.toDataURL`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toDataURL). It's possible to make the background auto-resize to the content of the image with [`editor.image.setAutoresizeEnabled(true)`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.EditorImage.html#setAutoresizeEnabled):
|
162
|
+
```ts
|
163
|
+
const editor = new Editor(document.body);
|
164
|
+
|
165
|
+
const addToHistory = false;
|
166
|
+
editor.dispatch(editor.image.setAutoresizeEnabled(true), addToHistory);
|
167
|
+
|
168
|
+
// Alternatively, using .setBackgroundStyle:
|
169
|
+
editor.dispatch(editor.setBackgroundStyle({ autoresize: true }), addToHistory);
|
170
|
+
```
|
171
|
+
|
172
|
+
## Saving
|
173
|
+
|
174
|
+
To save as an SVG, use [`editor.toSVG()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toSVG), which returns an `HTMLSVGElement`. Alternatively, if working with very large images that need to be saved in the background, consider using [`editor.toSVGAsync()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toSVG).
|
175
|
+
|
176
|
+
It's also possible to render the editor to a PNG or JPEG data URL. This can be done with [`editor.toDataURL()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#toDataURL).
|
177
|
+
|
178
|
+
The region of the image that will be saved can be changed by calling [`editor.image.setImportExportRect`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js_draw.Editor.html#setImportExportRect) or
|
179
|
+
|
137
180
|
## Settings/configuration
|
138
181
|
### Disabling touchpad panning
|
139
182
|
|
@@ -153,7 +196,7 @@ const editor = new Editor(document.body, {
|
|
153
196
|
|
154
197
|
### Localization
|
155
198
|
|
156
|
-
If a user's language is available in [src/localizations/](src/localizations
|
199
|
+
If a user's language is available in [src/localizations/](packages/js-draw/src/localizations) (as determined by `navigator.languages`), that localization will be used.
|
157
200
|
|
158
201
|
To override the default language, use `getLocalizationTable([ 'custom locale here' ])`. For example,
|
159
202
|
```ts
|
@@ -165,7 +208,7 @@ const editor = new Editor(document.body, {
|
|
165
208
|
|
166
209
|
<details><summary>Creating a custom localization</summary>
|
167
210
|
|
168
|
-
See [src/localization.ts](src/localization.ts) for a list of strings that can be translated.
|
211
|
+
See [src/localization.ts](packages/js-draw/src/localization.ts) for a list of strings that can be translated.
|
169
212
|
|
170
213
|
Many of the default strings in the editor might be overridden like this:
|
171
214
|
```ts
|
@@ -176,7 +219,7 @@ const editor = new Editor(document.body, {
|
|
176
219
|
// the English (default) localization will be used
|
177
220
|
|
178
221
|
// Strings for the main editor interface
|
179
|
-
// (see src/localization.ts)
|
222
|
+
// (see packages/js-draw/src/localization.ts)
|
180
223
|
loading: (percentage: number) => `Cargando: ${percentage}%...`,
|
181
224
|
imageEditor: 'Editor de dibujos',
|
182
225
|
|
@@ -198,6 +241,16 @@ const editor = new Editor(document.body, {
|
|
198
241
|
|
199
242
|
</details>
|
200
243
|
|
244
|
+
### Setting the minimum and maximum zoom
|
245
|
+
|
246
|
+
By default, the editor's minimum and maximum zoom are very large (2·10<sup>-10</sup>x and 10<sup>12</sup>x, respectively). These are configurable by the `minZoom` and `maxZoom` settings. For example,
|
247
|
+
```ts
|
248
|
+
const editor = new Editor(document.body, {
|
249
|
+
minZoom: 0.5,
|
250
|
+
maxZoom: 2,
|
251
|
+
});
|
252
|
+
```
|
253
|
+
|
201
254
|
## Changing the editor's color theme
|
202
255
|
|
203
256
|
The editor's color theme is specified using CSS. Its default theme looks like this:
|
@@ -276,3 +329,10 @@ body .imageEditorContainer {
|
|
276
329
|
```
|
277
330
|
disables the dark theme and creates a theme that primarily uses yellow/green colors.
|
278
331
|
|
332
|
+
# Examples and resources
|
333
|
+
|
334
|
+
- [Examples](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md)
|
335
|
+
- [How to add a custom pen type](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Additional_Documentation.CustomizingTools__.html#md:adding-a-new-pen-type)
|
336
|
+
- [A material icon theme for js-draw](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/_js_draw_material_icons.html#md:js-drawmaterial-icons)
|
337
|
+
- [More documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Additional_Documentation.html)
|
338
|
+
|