js-draw 0.1.11 → 0.2.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/.eslintrc.js +1 -0
- package/.firebaserc +5 -0
- package/.github/workflows/firebase-hosting-merge.yml +25 -0
- package/.github/workflows/firebase-hosting-pull-request.yml +22 -0
- package/.github/workflows/github-pages.yml +52 -0
- package/CHANGELOG.md +13 -0
- package/README.md +11 -6
- package/dist/bundle.js +1 -1
- package/dist/src/Color4.d.ts +19 -0
- package/dist/src/Color4.js +24 -3
- package/dist/src/Editor.d.ts +133 -4
- package/dist/src/Editor.js +124 -27
- package/dist/src/EditorImage.d.ts +8 -3
- package/dist/src/EditorImage.js +42 -26
- package/dist/src/EventDispatcher.d.ts +18 -0
- package/dist/src/EventDispatcher.js +19 -4
- package/dist/src/Pointer.d.ts +1 -1
- package/dist/src/Pointer.js +4 -3
- package/dist/src/SVGLoader.d.ts +1 -1
- package/dist/src/SVGLoader.js +14 -6
- package/dist/src/UndoRedoHistory.js +15 -2
- package/dist/src/Viewport.d.ts +8 -25
- package/dist/src/Viewport.js +18 -10
- package/dist/src/bundle/bundled.d.ts +1 -2
- package/dist/src/bundle/bundled.js +1 -2
- package/dist/src/commands/Command.d.ts +2 -2
- package/dist/src/commands/Command.js +4 -4
- package/dist/src/commands/Duplicate.d.ts +2 -2
- package/dist/src/commands/Duplicate.js +4 -5
- package/dist/src/commands/Erase.d.ts +2 -2
- package/dist/src/commands/Erase.js +7 -6
- package/dist/src/commands/SerializableCommand.d.ts +4 -5
- package/dist/src/commands/SerializableCommand.js +12 -4
- package/dist/src/commands/invertCommand.d.ts +4 -0
- package/dist/src/commands/invertCommand.js +44 -0
- package/dist/src/commands/lib.d.ts +6 -0
- package/dist/src/commands/lib.js +6 -0
- package/dist/src/commands/localization.d.ts +2 -1
- package/dist/src/commands/localization.js +1 -0
- package/dist/src/components/AbstractComponent.d.ts +16 -11
- package/dist/src/components/AbstractComponent.js +28 -17
- package/dist/src/components/SVGGlobalAttributesObject.d.ts +4 -4
- package/dist/src/components/SVGGlobalAttributesObject.js +8 -2
- package/dist/src/components/Stroke.d.ts +16 -6
- package/dist/src/components/Stroke.js +12 -9
- package/dist/src/components/Text.d.ts +5 -5
- package/dist/src/components/Text.js +9 -9
- package/dist/src/components/UnknownSVGObject.d.ts +4 -4
- package/dist/src/components/UnknownSVGObject.js +7 -2
- package/dist/src/components/builders/ArrowBuilder.d.ts +1 -1
- package/dist/src/components/builders/ArrowBuilder.js +1 -1
- package/dist/src/components/builders/FreehandLineBuilder.d.ts +8 -3
- package/dist/src/components/builders/FreehandLineBuilder.js +142 -71
- package/dist/src/components/builders/LineBuilder.d.ts +1 -1
- package/dist/src/components/builders/LineBuilder.js +1 -1
- package/dist/src/components/builders/RectangleBuilder.d.ts +1 -1
- package/dist/src/components/builders/RectangleBuilder.js +3 -3
- package/dist/src/components/builders/types.d.ts +1 -1
- package/dist/src/components/lib.d.ts +4 -0
- package/dist/src/components/lib.js +4 -0
- package/dist/src/lib.d.ts +25 -0
- package/dist/src/lib.js +25 -0
- package/dist/src/localization.d.ts +1 -0
- package/dist/src/localization.js +5 -1
- package/dist/src/localizations/es.js +1 -1
- package/dist/src/{geometry → math}/LineSegment2.d.ts +0 -0
- package/dist/src/{geometry → math}/LineSegment2.js +0 -0
- package/dist/src/math/Mat33.d.ts +78 -0
- package/dist/src/{geometry → math}/Mat33.js +48 -20
- package/dist/src/{geometry → math}/Path.d.ts +2 -1
- package/dist/src/{geometry → math}/Path.js +59 -52
- package/dist/src/{geometry → math}/Rect2.d.ts +2 -2
- package/dist/src/{geometry → math}/Rect2.js +0 -0
- package/dist/src/{geometry → math}/Vec2.d.ts +0 -0
- package/dist/src/{geometry → math}/Vec2.js +0 -0
- package/dist/src/math/Vec3.d.ts +96 -0
- package/dist/src/{geometry → math}/Vec3.js +63 -15
- package/dist/src/math/lib.d.ts +7 -0
- package/dist/src/math/lib.js +7 -0
- package/dist/src/math/rounding.d.ts +3 -0
- package/dist/src/math/rounding.js +121 -0
- package/dist/src/rendering/Display.d.ts +47 -1
- package/dist/src/rendering/Display.js +60 -15
- package/dist/src/rendering/caching/CacheRecord.d.ts +3 -2
- package/dist/src/rendering/caching/CacheRecord.js +4 -1
- package/dist/src/rendering/caching/CacheRecordManager.d.ts +5 -4
- package/dist/src/rendering/caching/CacheRecordManager.js +16 -4
- package/dist/src/rendering/caching/RenderingCache.d.ts +2 -3
- package/dist/src/rendering/caching/RenderingCache.js +10 -11
- package/dist/src/rendering/caching/RenderingCacheNode.d.ts +2 -1
- package/dist/src/rendering/caching/RenderingCacheNode.js +18 -7
- package/dist/src/rendering/caching/testUtils.js +1 -1
- package/dist/src/rendering/caching/types.d.ts +2 -4
- package/dist/src/rendering/localization.d.ts +2 -0
- package/dist/src/rendering/localization.js +2 -0
- package/dist/src/rendering/renderers/AbstractRenderer.d.ts +4 -4
- package/dist/src/rendering/renderers/AbstractRenderer.js +2 -2
- package/dist/src/rendering/renderers/CanvasRenderer.d.ts +4 -4
- package/dist/src/rendering/renderers/CanvasRenderer.js +2 -2
- package/dist/src/rendering/renderers/DummyRenderer.d.ts +4 -4
- package/dist/src/rendering/renderers/DummyRenderer.js +1 -1
- package/dist/src/rendering/renderers/SVGRenderer.d.ts +3 -3
- package/dist/src/rendering/renderers/SVGRenderer.js +8 -2
- package/dist/src/rendering/renderers/TextOnlyRenderer.d.ts +5 -3
- package/dist/src/rendering/renderers/TextOnlyRenderer.js +13 -3
- package/dist/src/toolbar/HTMLToolbar.js +1 -0
- package/dist/src/toolbar/icons.d.ts +3 -0
- package/dist/src/toolbar/icons.js +142 -132
- package/dist/src/toolbar/localization.d.ts +2 -1
- package/dist/src/toolbar/localization.js +2 -1
- package/dist/src/toolbar/makeColorInput.js +3 -2
- package/dist/src/toolbar/widgets/ActionButtonWidget.d.ts +13 -0
- package/dist/src/toolbar/widgets/ActionButtonWidget.js +21 -0
- package/dist/src/toolbar/widgets/BaseWidget.js +2 -0
- package/dist/src/toolbar/widgets/HandToolWidget.js +3 -3
- package/dist/src/toolbar/widgets/PenWidget.js +1 -0
- package/dist/src/toolbar/widgets/SelectionWidget.d.ts +0 -1
- package/dist/src/toolbar/widgets/SelectionWidget.js +23 -30
- package/dist/src/tools/Eraser.js +1 -1
- package/dist/src/tools/PanZoom.d.ts +1 -1
- package/dist/src/tools/PanZoom.js +24 -14
- package/dist/src/tools/Pen.d.ts +1 -2
- package/dist/src/tools/Pen.js +8 -1
- package/dist/src/tools/PipetteTool.js +1 -0
- package/dist/src/tools/SelectionTool.d.ts +3 -3
- package/dist/src/tools/SelectionTool.js +51 -28
- package/dist/src/tools/TextTool.js +1 -1
- package/dist/src/types.d.ts +21 -10
- package/dist/src/types.js +7 -5
- package/firebase.json +16 -0
- package/package.json +118 -101
- package/src/Color4.ts +23 -2
- package/src/Editor.ts +181 -37
- package/src/EditorImage.test.ts +2 -4
- package/src/EditorImage.ts +46 -28
- package/src/EventDispatcher.ts +21 -6
- package/src/Pointer.ts +4 -3
- package/src/SVGLoader.ts +14 -6
- package/src/UndoRedoHistory.ts +18 -2
- package/src/Viewport.ts +23 -18
- package/src/bundle/bundled.ts +1 -2
- package/src/commands/Command.ts +5 -5
- package/src/commands/Duplicate.ts +4 -5
- package/src/commands/Erase.ts +7 -6
- package/src/commands/SerializableCommand.ts +17 -9
- package/src/commands/invertCommand.ts +51 -0
- package/src/commands/lib.ts +14 -0
- package/src/commands/localization.ts +3 -1
- package/src/components/AbstractComponent.ts +35 -24
- package/src/components/SVGGlobalAttributesObject.ts +11 -4
- package/src/components/Stroke.test.ts +4 -6
- package/src/components/Stroke.ts +15 -11
- package/src/components/Text.test.ts +2 -2
- package/src/components/Text.ts +9 -10
- package/src/components/UnknownSVGObject.ts +10 -4
- package/src/components/builders/ArrowBuilder.ts +2 -2
- package/src/components/builders/FreehandLineBuilder.ts +190 -80
- package/src/components/builders/LineBuilder.ts +2 -2
- package/src/components/builders/RectangleBuilder.ts +3 -3
- package/src/components/builders/types.ts +1 -1
- package/src/components/lib.ts +9 -0
- package/src/lib.ts +28 -0
- package/src/localization.ts +6 -0
- package/src/localizations/es.ts +2 -1
- package/src/{geometry → math}/LineSegment2.test.ts +0 -0
- package/src/{geometry → math}/LineSegment2.ts +0 -0
- package/src/{geometry → math}/Mat33.test.ts +0 -0
- package/src/{geometry → math}/Mat33.ts +48 -20
- package/src/{geometry → math}/Path.fromString.test.ts +0 -0
- package/src/{geometry → math}/Path.test.ts +0 -0
- package/src/{geometry → math}/Path.toString.test.ts +11 -2
- package/src/{geometry → math}/Path.ts +61 -58
- package/src/{geometry → math}/Rect2.test.ts +0 -0
- package/src/{geometry → math}/Rect2.ts +2 -2
- package/src/{geometry → math}/Vec2.test.ts +0 -0
- package/src/{geometry → math}/Vec2.ts +0 -0
- package/src/{geometry → math}/Vec3.test.ts +0 -0
- package/src/{geometry → math}/Vec3.ts +64 -16
- package/src/math/lib.ts +15 -0
- package/src/math/rounding.test.ts +40 -0
- package/src/math/rounding.ts +147 -0
- package/src/rendering/Display.ts +63 -15
- package/src/rendering/caching/CacheRecord.test.ts +3 -3
- package/src/rendering/caching/CacheRecord.ts +6 -2
- package/src/rendering/caching/CacheRecordManager.ts +34 -8
- package/src/rendering/caching/RenderingCache.test.ts +3 -3
- package/src/rendering/caching/RenderingCache.ts +11 -16
- package/src/rendering/caching/RenderingCacheNode.ts +23 -7
- package/src/rendering/caching/testUtils.ts +1 -1
- package/src/rendering/caching/types.ts +2 -7
- package/src/rendering/localization.ts +4 -0
- package/src/rendering/renderers/AbstractRenderer.ts +4 -4
- package/src/rendering/renderers/CanvasRenderer.ts +5 -5
- package/src/rendering/renderers/DummyRenderer.test.ts +2 -2
- package/src/rendering/renderers/DummyRenderer.ts +4 -4
- package/src/rendering/renderers/SVGRenderer.ts +10 -4
- package/src/rendering/renderers/TextOnlyRenderer.ts +17 -6
- package/src/toolbar/HTMLToolbar.ts +1 -0
- package/src/toolbar/icons.ts +157 -137
- package/src/toolbar/localization.ts +4 -2
- package/src/toolbar/makeColorInput.ts +3 -2
- package/src/toolbar/toolbar.css +1 -1
- package/src/toolbar/widgets/ActionButtonWidget.ts +31 -0
- package/src/toolbar/widgets/BaseWidget.ts +2 -0
- package/src/toolbar/widgets/HandToolWidget.ts +3 -3
- package/src/toolbar/widgets/PenWidget.ts +2 -0
- package/src/toolbar/widgets/SelectionWidget.ts +46 -41
- package/src/tools/Eraser.ts +2 -2
- package/src/tools/PanZoom.ts +28 -17
- package/src/tools/Pen.ts +11 -2
- package/src/tools/PipetteTool.ts +2 -0
- package/src/tools/SelectionTool.test.ts +2 -4
- package/src/tools/SelectionTool.ts +52 -24
- package/src/tools/TextTool.ts +2 -2
- package/src/tools/UndoRedoShortcut.test.ts +1 -1
- package/src/types.ts +23 -7
- package/tsconfig.json +4 -1
- package/typedoc.json +20 -0
- package/dist/src/geometry/Mat33.d.ts +0 -32
- package/dist/src/geometry/Vec3.d.ts +0 -34
package/.eslintrc.js
CHANGED
package/.firebaserc
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
# This file was auto-generated by the Firebase CLI
|
2
|
+
# https://github.com/firebase/firebase-tools
|
3
|
+
|
4
|
+
name: Deploy to Firebase Hosting on merge
|
5
|
+
'on':
|
6
|
+
push:
|
7
|
+
branches:
|
8
|
+
- 'main'
|
9
|
+
jobs:
|
10
|
+
build_and_deploy:
|
11
|
+
runs-on: ubuntu-latest
|
12
|
+
steps:
|
13
|
+
- uses: actions/checkout@v3
|
14
|
+
- name: Install dependencies
|
15
|
+
run: yarn install
|
16
|
+
- name: Run tests
|
17
|
+
run: yarn test
|
18
|
+
- name: Build
|
19
|
+
run: cd docs/example && yarn install && yarn build
|
20
|
+
- uses: FirebaseExtended/action-hosting-deploy@v0
|
21
|
+
with:
|
22
|
+
repoToken: '${{ secrets.GITHUB_TOKEN }}'
|
23
|
+
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_JS_DRAW }}'
|
24
|
+
channelId: live
|
25
|
+
projectId: js-draw
|
@@ -0,0 +1,22 @@
|
|
1
|
+
# This file was auto-generated by the Firebase CLI
|
2
|
+
# https://github.com/firebase/firebase-tools
|
3
|
+
|
4
|
+
name: Deploy to Firebase Hosting on PR
|
5
|
+
'on': pull_request
|
6
|
+
jobs:
|
7
|
+
build_and_preview:
|
8
|
+
if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'
|
9
|
+
runs-on: ubuntu-latest
|
10
|
+
steps:
|
11
|
+
- uses: actions/checkout@v3
|
12
|
+
- name: Install dependencies
|
13
|
+
run: yarn install
|
14
|
+
- name: Run tests
|
15
|
+
run: yarn test
|
16
|
+
- name: Build
|
17
|
+
run: cd docs/example && yarn install && yarn build
|
18
|
+
- uses: FirebaseExtended/action-hosting-deploy@v0
|
19
|
+
with:
|
20
|
+
repoToken: '${{ secrets.GITHUB_TOKEN }}'
|
21
|
+
firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_JS_DRAW }}'
|
22
|
+
projectId: js-draw
|
@@ -0,0 +1,52 @@
|
|
1
|
+
# Created on GitHub
|
2
|
+
|
3
|
+
# Simple workflow for deploying static content to GitHub Pages
|
4
|
+
name: Deploy static content to Pages
|
5
|
+
|
6
|
+
on:
|
7
|
+
# Runs on pushes targeting the default branch
|
8
|
+
push:
|
9
|
+
branches: ["main"]
|
10
|
+
|
11
|
+
# Allows you to run this workflow manually from the Actions tab
|
12
|
+
workflow_dispatch:
|
13
|
+
|
14
|
+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
15
|
+
permissions:
|
16
|
+
contents: read
|
17
|
+
pages: write
|
18
|
+
id-token: write
|
19
|
+
|
20
|
+
# Allow one concurrent deployment
|
21
|
+
concurrency:
|
22
|
+
group: "pages"
|
23
|
+
cancel-in-progress: true
|
24
|
+
|
25
|
+
jobs:
|
26
|
+
# Single deploy job since we're just deploying
|
27
|
+
deploy:
|
28
|
+
environment:
|
29
|
+
name: github-pages
|
30
|
+
url: ${{ steps.deployment.outputs.page_url }}
|
31
|
+
runs-on: ubuntu-latest
|
32
|
+
steps:
|
33
|
+
- name: Checkout
|
34
|
+
uses: actions/checkout@v3
|
35
|
+
- name: Install dependencies
|
36
|
+
run: yarn install
|
37
|
+
- name: Run tests
|
38
|
+
run: yarn test
|
39
|
+
- name: Build documentation
|
40
|
+
run: yarn doc
|
41
|
+
- name: Build
|
42
|
+
run: cd docs/example && yarn install && yarn build
|
43
|
+
- name: Setup Pages
|
44
|
+
uses: actions/configure-pages@v2
|
45
|
+
- name: Upload artifact
|
46
|
+
uses: actions/upload-pages-artifact@v1
|
47
|
+
with:
|
48
|
+
# Upload just the docs folder
|
49
|
+
path: './docs/'
|
50
|
+
- name: Deploy to GitHub Pages
|
51
|
+
id: deployment
|
52
|
+
uses: actions/deploy-pages@v1
|
package/CHANGELOG.md
CHANGED
@@ -1,3 +1,16 @@
|
|
1
|
+
# 0.2.0
|
2
|
+
* Export `Mat33`, `Vec3`, `Vec2`, and `Color4`.
|
3
|
+
* [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/index.html)
|
4
|
+
* Bug fixes:
|
5
|
+
* After using up all blocks in the rendering cache, a single block was repeatedly re-allocated, leading to slow performance.
|
6
|
+
|
7
|
+
# 0.1.12
|
8
|
+
* Add icons to the selection menu.
|
9
|
+
* Screen-reader-related bug fixes.
|
10
|
+
* Fix bug where parent cache nodes were not fully re-rendered after erasing a stroke and replacing it with more, larger strokes.
|
11
|
+
* Generate strokes with single paths, instead of one path for each segment.
|
12
|
+
* This should make new strokes take less space when saving to SVG because we don't need to store the edges for each part of the stroke.
|
13
|
+
|
1
14
|
# 0.1.11
|
2
15
|
* Fix 'Enter' key not toggling toolbar buttons.
|
3
16
|
* Add zoom limits.
|
package/README.md
CHANGED
@@ -1,10 +1,12 @@
|
|
1
1
|
# js-draw
|
2
2
|
|
3
|
-
[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Try it!](https://personalizedrefrigerator.github.io/js-draw/example/example.html)
|
3
|
+
[NPM package](https://www.npmjs.com/package/js-draw) | [GitHub](https://github.com/personalizedrefrigerator/js-draw) | [Documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/) | [Try it!](https://personalizedrefrigerator.github.io/js-draw/example/example.html)
|
4
4
|
|
5
5
|

|
6
6
|
|
7
|
-
For example usage, see [docs/example/example.ts](docs/example/example.ts).
|
7
|
+
For example usage, see [docs/example/example.ts](docs/example/example.ts) or read [the (work-in-progress) documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/lib.html).
|
8
|
+
|
9
|
+
At present, not all documented modules are `import`-able.
|
8
10
|
|
9
11
|
# API
|
10
12
|
|
@@ -13,6 +15,7 @@ To use `js-draw`,
|
|
13
15
|
## Creating an `Editor`
|
14
16
|
|
15
17
|
### With a bundler that supports importing `.css` files
|
18
|
+
|
16
19
|
To create a new `Editor` and add it as a child of `document.body`,
|
17
20
|
```ts
|
18
21
|
import Editor from 'js-draw';
|
@@ -24,6 +27,7 @@ const editor = new Editor(document.body);
|
|
24
27
|
The `import js-draw/styles` step requires a bundler that can import `.css` files. For example, [`webpack` with `css-loader`.](https://webpack.js.org/loaders/css-loader/)
|
25
28
|
|
26
29
|
### With a bundler that doesn't support importing `.css` files
|
30
|
+
|
27
31
|
Import the pre-bundled version of the editor to apply CSS after loading the page.
|
28
32
|
```ts
|
29
33
|
import Editor from 'js-draw';
|
@@ -34,10 +38,11 @@ const editor = new Editor(document.body);
|
|
34
38
|
`js-draw/bundle` is a version of the editor pre-processed by `Webpack`. As such, `import`ing it applies editor-specific CSS to the document.
|
35
39
|
|
36
40
|
### Without a bundler
|
41
|
+
|
37
42
|
If you're not using a bundler, consider using the pre-bundled editor:
|
38
43
|
```html
|
39
|
-
<!-- Replace 0.
|
40
|
-
<script src="https://cdn.jsdelivr.net/npm/js-draw@0.
|
44
|
+
<!-- Replace 0.2.0 with the latest version of js-draw -->
|
45
|
+
<script src="https://cdn.jsdelivr.net/npm/js-draw@0.2.0/dist/bundle.js"></script>
|
41
46
|
<script>
|
42
47
|
const editor = new jsdraw.Editor(document.body);
|
43
48
|
editor.addToolbar();
|
@@ -79,7 +84,7 @@ editor.loadFromSVG(`
|
|
79
84
|
**Note**: While `js-draw` supports a small subset of the SVG markup language, it tries to preserve unrecognised SVG elements.
|
80
85
|
|
81
86
|
For example, although `js-draw` doesn't support `<circle/>` elements,
|
82
|
-
```
|
87
|
+
```xml
|
83
88
|
<svg
|
84
89
|
viewBox="156 74 200 150"
|
85
90
|
width="200" height="150"
|
@@ -93,7 +98,7 @@ renders as
|
|
93
98
|

|
94
99
|
|
95
100
|
but exports to
|
96
|
-
```
|
101
|
+
```xml
|
97
102
|
<svg viewBox="156 74 200 150" width="200" height="150" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><g><path d="M156,150M156,150Q190,190 209,217L213,215Q193,187 160,148M209,217M209,217Q212,218 236,178L232,176Q210,215 213,215M236,178M236,178Q240,171 307,95L305,93Q237,168 232,176M307,95M307,95Q312,90 329,78L327,74Q309,87 305,93" fill="#07a837"></path></g><circle cx="200" cy="100" r="40" fill="red"></circle></svg>
|
98
103
|
```
|
99
104
|
|