js-draw 1.4.1 → 1.6.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.
Files changed (63) hide show
  1. package/README.md +10 -1
  2. package/dist/Editor.css +13 -12
  3. package/dist/bundle.js +2 -2
  4. package/dist/bundledStyles.js +1 -1
  5. package/dist/cjs/Editor.d.ts +8 -0
  6. package/dist/cjs/Editor.js +32 -9
  7. package/dist/cjs/SVGLoader.d.ts +6 -0
  8. package/dist/cjs/SVGLoader.js +100 -56
  9. package/dist/cjs/commands/Erase.d.ts +7 -1
  10. package/dist/cjs/commands/Erase.js +13 -4
  11. package/dist/cjs/commands/invertCommand.js +1 -1
  12. package/dist/cjs/components/Stroke.d.ts +1 -1
  13. package/dist/cjs/components/Stroke.js +1 -1
  14. package/dist/cjs/image/EditorImage.js +1 -1
  15. package/dist/cjs/toolbar/AbstractToolbar.d.ts +13 -4
  16. package/dist/cjs/toolbar/AbstractToolbar.js +18 -5
  17. package/dist/cjs/toolbar/AbstractToolbar.test.d.ts +1 -0
  18. package/dist/cjs/toolbar/EdgeToolbar.js +2 -2
  19. package/dist/cjs/toolbar/widgets/BaseToolWidget.js +4 -13
  20. package/dist/cjs/toolbar/widgets/BaseToolWidget.test.d.ts +1 -0
  21. package/dist/cjs/toolbar/widgets/BaseWidget.d.ts +5 -1
  22. package/dist/cjs/toolbar/widgets/BaseWidget.js +45 -28
  23. package/dist/cjs/toolbar/widgets/BaseWidget.test.d.ts +1 -0
  24. package/dist/cjs/toolbar/widgets/SaveActionWidget.d.ts +2 -1
  25. package/dist/cjs/toolbar/widgets/SaveActionWidget.js +6 -2
  26. package/dist/cjs/tools/BaseTool.js +1 -0
  27. package/dist/cjs/tools/SelectionTool/Selection.js +4 -2
  28. package/dist/cjs/tools/ToolController.d.ts +23 -0
  29. package/dist/cjs/tools/ToolController.js +65 -4
  30. package/dist/cjs/tools/ToolController.test.d.ts +1 -0
  31. package/dist/cjs/version.js +1 -1
  32. package/dist/mjs/Editor.d.ts +8 -0
  33. package/dist/mjs/Editor.mjs +32 -9
  34. package/dist/mjs/SVGLoader.d.ts +6 -0
  35. package/dist/mjs/SVGLoader.mjs +99 -55
  36. package/dist/mjs/commands/Erase.d.ts +7 -1
  37. package/dist/mjs/commands/Erase.mjs +13 -4
  38. package/dist/mjs/commands/invertCommand.mjs +1 -1
  39. package/dist/mjs/components/Stroke.d.ts +1 -1
  40. package/dist/mjs/components/Stroke.mjs +1 -1
  41. package/dist/mjs/image/EditorImage.mjs +1 -1
  42. package/dist/mjs/toolbar/AbstractToolbar.d.ts +13 -4
  43. package/dist/mjs/toolbar/AbstractToolbar.mjs +18 -5
  44. package/dist/mjs/toolbar/AbstractToolbar.test.d.ts +1 -0
  45. package/dist/mjs/toolbar/EdgeToolbar.mjs +2 -2
  46. package/dist/mjs/toolbar/widgets/BaseToolWidget.mjs +4 -13
  47. package/dist/mjs/toolbar/widgets/BaseToolWidget.test.d.ts +1 -0
  48. package/dist/mjs/toolbar/widgets/BaseWidget.d.ts +5 -1
  49. package/dist/mjs/toolbar/widgets/BaseWidget.mjs +45 -28
  50. package/dist/mjs/toolbar/widgets/BaseWidget.test.d.ts +1 -0
  51. package/dist/mjs/toolbar/widgets/SaveActionWidget.d.ts +2 -1
  52. package/dist/mjs/toolbar/widgets/SaveActionWidget.mjs +6 -2
  53. package/dist/mjs/tools/BaseTool.mjs +1 -0
  54. package/dist/mjs/tools/SelectionTool/Selection.mjs +4 -2
  55. package/dist/mjs/tools/ToolController.d.ts +23 -0
  56. package/dist/mjs/tools/ToolController.mjs +65 -4
  57. package/dist/mjs/tools/ToolController.test.d.ts +1 -0
  58. package/dist/mjs/version.mjs +1 -1
  59. package/docs/img/readme-images/logo.svg +1 -0
  60. package/package.json +3 -3
  61. package/src/Editor.scss +4 -2
  62. package/src/toolbar/EdgeToolbar.scss +7 -4
  63. package/src/tools/SelectionTool/SelectionTool.scss +2 -2
package/README.md CHANGED
@@ -1,7 +1,16 @@
1
- # js-draw
1
+
2
+
3
+ <div align="center">
4
+ <img height="190" src="./docs/img/readme-images/logo.svg" alt="js-draw logo"/>
5
+ </div>
6
+
7
+ <h1 align="center">js-draw</h1>
8
+ <center>
2
9
 
3
10
  [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)
4
11
 
12
+ </center>
13
+
5
14
  ![](docs/img/readme-images/js-draw.jpg)
6
15
 
7
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/).
package/dist/Editor.css CHANGED
@@ -588,7 +588,7 @@
588
588
  }
589
589
  }
590
590
  @media screen and (max-width: 700px) and (hover: hover) {
591
- .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:hover > label {
591
+ .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:hover:not(:focus-visible) > label {
592
592
  opacity: 0.8;
593
593
  animation: 1s ease show-label;
594
594
  }
@@ -596,7 +596,7 @@
596
596
  @media screen and (max-width: 700px) {
597
597
  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:active > label {
598
598
  opacity: 0.8;
599
- animation: 0.5s ease show-label;
599
+ animation: 1s ease show-label;
600
600
  }
601
601
  .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:focus-visible > label {
602
602
  animation: 1.5s ease rehide-label;
@@ -694,7 +694,7 @@
694
694
  order: 100;
695
695
  }
696
696
  .toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-left > .toolbar-button > .toolbar-icon {
697
- margin-left: 10px;
697
+ margin-left: 7px;
698
698
  margin-right: 0;
699
699
  }
700
700
  .toolbar-edge-toolbar .toolbar-toolContainer.label-inline.label-right {
@@ -706,8 +706,9 @@
706
706
  }
707
707
  .toolbar-edge-toolbar .toolbar-toolContainer.label-inline > .toolbar-button > .toolbar-icon {
708
708
  height: 100%;
709
- margin-right: 10px;
709
+ margin-right: 7px;
710
710
  margin-left: 0;
711
+ width: 22px;
711
712
  }
712
713
  .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button {
713
714
  width: calc(var(--toolbar-button-size) + var(--extra-left-right-padding));
@@ -744,14 +745,14 @@
744
745
  }
745
746
  }
746
747
  @media (hover: hover) {
747
- .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover > label {
748
+ .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover:not(:focus-visible) > label {
748
749
  opacity: 0.8;
749
750
  animation: 1s ease show-label;
750
751
  }
751
752
  }
752
753
  .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:active > label {
753
754
  opacity: 0.8;
754
- animation: 0.5s ease show-label;
755
+ animation: 1s ease show-label;
755
756
  }
756
757
  .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:focus-visible > label {
757
758
  animation: 1.5s ease rehide-label;
@@ -871,14 +872,14 @@
871
872
  }
872
873
  }
873
874
  @media (hover: hover) {
874
- .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover > label > .button-label-text {
875
+ .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:hover:not(:focus-visible) > label > .button-label-text {
875
876
  opacity: 0.8;
876
877
  animation: 1s ease show-label;
877
878
  }
878
879
  }
879
880
  .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:active > label > .button-label-text {
880
881
  opacity: 0.8;
881
- animation: 0.5s ease show-label;
882
+ animation: 1s ease show-label;
882
883
  }
883
884
  .toolbar-edgemenu-container .toolbar-grid-selector .choice-button:focus-visible > label > .button-label-text {
884
885
  animation: 1.5s ease rehide-label;
@@ -1113,7 +1114,7 @@
1113
1114
  cursor: ns-resize;
1114
1115
  }
1115
1116
  .selection-tool-handle.selection-tool-resize-xy {
1116
- cursor: nw-resize;
1117
+ cursor: nwse-resize;
1117
1118
  }
1118
1119
 
1119
1120
  .selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-x {
@@ -1123,7 +1124,7 @@
1123
1124
  cursor: ew-resize;
1124
1125
  }
1125
1126
  .selection-tool-rotated-near-perpendicular .selection-tool-handle.selection-tool-resize-xy {
1126
- cursor: sw-resize;
1127
+ cursor: nesw-resize;
1127
1128
  }
1128
1129
 
1129
1130
  .overlay.handleOverlay {
@@ -1371,8 +1372,8 @@ visible.
1371
1372
  }
1372
1373
 
1373
1374
  .imageEditorContainer .textRendererOutputContainer {
1374
- width: 1px;
1375
- height: 1px;
1375
+ width: 0.001px;
1376
+ height: 0.001px;
1376
1377
  overflow: hidden;
1377
1378
  }
1378
1379