js-draw 1.24.2 → 1.26.0
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +1 -1
- package/README.md +15 -15
- package/dist/Editor.css +1 -1935
- package/dist/bundle.js +473 -4
- package/dist/bundledStyles.js +1 -1
- package/dist/cjs/Editor.d.ts +12 -0
- package/dist/cjs/Editor.js +2 -1
- package/dist/cjs/bundle/bundled.js +2 -1
- package/dist/cjs/commands/invertCommand.test.d.ts +1 -0
- package/dist/cjs/image/EditorImage.d.ts +2 -1
- package/dist/cjs/image/EditorImage.js +21 -6
- package/dist/cjs/testing/fillHtmlInput.d.ts +6 -0
- package/dist/cjs/testing/fillHtmlInput.js +22 -0
- package/dist/cjs/testing/sendKeyPressRelease.d.ts +2 -2
- package/dist/cjs/testing/sendKeyPressRelease.js +15 -3
- package/dist/cjs/toolbar/AbstractToolbar.js +9 -2
- package/dist/cjs/toolbar/widgets/BaseWidget.js +6 -1
- package/dist/cjs/toolbar/widgets/HandToolWidget.js +3 -3
- package/dist/cjs/tools/PasteHandler.d.ts +1 -1
- package/dist/cjs/tools/PasteHandler.js +12 -4
- package/dist/cjs/tools/PasteHandler.test.d.ts +1 -0
- package/dist/cjs/tools/SelectionTool/Selection.js +11 -6
- package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +3 -1
- package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.js +13 -4
- package/dist/cjs/tools/TextTool.js +9 -2
- package/dist/cjs/util/ClipboardHandler.js +23 -1
- package/dist/cjs/util/assertions.d.ts +7 -6
- package/dist/cjs/util/assertions.js +35 -29
- package/dist/cjs/version.js +1 -1
- package/dist/mjs/Editor.d.ts +12 -0
- package/dist/mjs/Editor.mjs +2 -1
- package/dist/mjs/bundle/bundled.mjs +2 -1
- package/dist/mjs/commands/invertCommand.test.d.ts +1 -0
- package/dist/mjs/image/EditorImage.d.ts +2 -1
- package/dist/mjs/image/EditorImage.mjs +21 -6
- package/dist/mjs/testing/fillHtmlInput.d.ts +6 -0
- package/dist/mjs/testing/fillHtmlInput.mjs +17 -0
- package/dist/mjs/testing/sendKeyPressRelease.d.ts +2 -2
- package/dist/mjs/testing/sendKeyPressRelease.mjs +12 -3
- package/dist/mjs/toolbar/AbstractToolbar.mjs +9 -2
- package/dist/mjs/toolbar/widgets/BaseWidget.mjs +6 -1
- package/dist/mjs/toolbar/widgets/HandToolWidget.mjs +3 -3
- package/dist/mjs/tools/PasteHandler.d.ts +1 -1
- package/dist/mjs/tools/PasteHandler.mjs +12 -4
- package/dist/mjs/tools/PasteHandler.test.d.ts +1 -0
- package/dist/mjs/tools/SelectionTool/Selection.mjs +11 -6
- package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +3 -1
- package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs +13 -4
- package/dist/mjs/tools/TextTool.mjs +9 -2
- package/dist/mjs/util/ClipboardHandler.mjs +23 -1
- package/dist/mjs/util/assertions.d.ts +7 -6
- package/dist/mjs/util/assertions.mjs +28 -24
- package/dist/mjs/version.mjs +1 -1
- package/package.json +4 -4
- package/src/tools/SelectionTool/SelectionTool.scss +11 -1
- package/src/tools/util/createMenuOverlay.scss +2 -1
package/LICENSE
CHANGED
package/README.md
CHANGED
@@ -5,7 +5,7 @@
|
|
5
5
|
<h1 align="center">js-draw</h1>
|
6
6
|
<div align="center">
|
7
7
|
|
8
|
-
[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/
|
8
|
+
[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/js-draw.html) | [Try it!](https://personalizedrefrigerator.github.io/js-draw/example/example.html)
|
9
9
|
|
10
10
|
</div>
|
11
11
|
|
@@ -17,7 +17,7 @@ For example usage, see [one of the examples](https://github.com/personalizedrefr
|
|
17
17
|
|
18
18
|
## Very large zoom range
|
19
19
|
|
20
|
-
A core feature of `js-draw` is its [large zoom range](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/
|
20
|
+
A core feature of `js-draw` is its [large zoom range](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorSettings.html#maxZoom) (from roughly 10⁻¹⁰x to 10¹⁰x).
|
21
21
|
|
22
22
|
<details open><summary><strong>Demo</strong></summary>
|
23
23
|
|
@@ -25,7 +25,7 @@ A core feature of `js-draw` is its [large zoom range](https://personalizedrefrig
|
|
25
25
|
|
26
26
|
</details>
|
27
27
|
|
28
|
-
Applications using `js-draw` can adjust this zoom range with custom [EditorSettings](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/
|
28
|
+
Applications using `js-draw` can adjust this zoom range with custom [EditorSettings](https://personalizedrefrigerator.github.io/js-draw/typedoc/interfaces/js-draw.EditorSettings.html).
|
29
29
|
|
30
30
|
## Touchscreen and stylus support
|
31
31
|
|
@@ -37,7 +37,7 @@ Applications using `js-draw` can adjust this zoom range with custom [EditorSetti
|
|
37
37
|
|
38
38
|
</details>
|
39
39
|
|
40
|
-
It's also possible to disable touch drawing. This can be useful when drawing with a stylus and can be done with either [PanZoomTool.setMode](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/
|
40
|
+
It's also possible to disable touch drawing. This can be useful when drawing with a stylus and can be done with either [PanZoomTool.setMode](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/js-draw.PanZoomTool.html#setMode) or, by a user, with the "hand" tool menu:
|
41
41
|
|
42
42
|
<img alt="screenshot: Hand tool menu at the bottom of the screen includes 'lock rotation' and 'touchscreen panning'. 'Touchscreen panning' is highlighted." src="https://github.com/personalizedrefrigerator/js-draw/assets/46334387/d96e2df5-6132-4122-954d-d25402754bc2" width="400"/>
|
43
43
|
|
@@ -68,7 +68,7 @@ It's possible for applications using `js-draw` to [add custom pen types](https:/
|
|
68
68
|
|
69
69
|
### With a bundler that supports importing `.css` files
|
70
70
|
|
71
|
-
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/
|
71
|
+
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:
|
72
72
|
|
73
73
|
```ts
|
74
74
|
import Editor from 'js-draw';
|
@@ -116,7 +116,7 @@ To create a toolbar with buttons for the default tools:
|
|
116
116
|
const toolbar = editor.addToolbar();
|
117
117
|
```
|
118
118
|
|
119
|
-
Save and exit buttons can be added with the [`.addSaveButton`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/
|
119
|
+
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:
|
120
120
|
|
121
121
|
```ts
|
122
122
|
toolbar.addSaveButton(() => {
|
@@ -195,7 +195,7 @@ which **does** contain the `<circle/>` element.
|
|
195
195
|
|
196
196
|
## Customizing the background
|
197
197
|
|
198
|
-
The background color and style can be customized with [editor.setBackgroundStyle](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/
|
198
|
+
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,
|
199
199
|
|
200
200
|
```ts
|
201
201
|
import { Editor, Color4, BackgroundComponentBackgroundType } from 'js-draw';
|
@@ -209,9 +209,9 @@ editor.dispatch(
|
|
209
209
|
);
|
210
210
|
```
|
211
211
|
|
212
|
-
Above, we use `editor.dispatch` because `setBackgroundStyle` returns a [`Command`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/
|
212
|
+
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.
|
213
213
|
|
214
|
-
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/
|
214
|
+
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):
|
215
215
|
|
216
216
|
```ts
|
217
217
|
const addToHistory = false;
|
@@ -226,7 +226,7 @@ editor.dispatch(
|
|
226
226
|
|
227
227
|
### Making the background fill the screen
|
228
228
|
|
229
|
-
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/
|
229
|
+
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):
|
230
230
|
|
231
231
|
```ts
|
232
232
|
const editor = new Editor(document.body);
|
@@ -240,11 +240,11 @@ editor.dispatch(editor.setBackgroundStyle({ autoresize: true }), addToHistory);
|
|
240
240
|
|
241
241
|
## Saving
|
242
242
|
|
243
|
-
To save as an SVG, use [`editor.toSVG()`](https://personalizedrefrigerator.github.io/js-draw/typedoc/classes/
|
243
|
+
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).
|
244
244
|
|
245
|
-
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/
|
245
|
+
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).
|
246
246
|
|
247
|
-
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/
|
247
|
+
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
|
248
248
|
|
249
249
|
## Settings/configuration
|
250
250
|
|
@@ -407,11 +407,11 @@ body .imageEditorContainer {
|
|
407
407
|
|
408
408
|
disables the dark theme and creates a theme that primarily uses yellow/green colors.
|
409
409
|
|
410
|
-
See also [adjustEditorThemeForContrast](https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/
|
410
|
+
See also [adjustEditorThemeForContrast](https://personalizedrefrigerator.github.io/js-draw/typedoc/functions/js-draw.adjustEditorThemeForContrast.html).
|
411
411
|
|
412
412
|
# Examples and resources
|
413
413
|
|
414
414
|
- [Examples](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md)
|
415
415
|
- [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)
|
416
|
-
- [A material icon theme for js-draw](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/
|
416
|
+
- [A material icon theme for js-draw](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/_js-draw_material-icons.html#md:js-drawmaterial-icons)
|
417
417
|
- [More documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/Guides.html)
|