js-draw 1.9.0 → 1.10.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 (109) hide show
  1. package/dist/Editor.css +48 -1
  2. package/dist/bundle.js +2 -2
  3. package/dist/bundledStyles.js +1 -1
  4. package/dist/cjs/Editor.d.ts +41 -0
  5. package/dist/cjs/Editor.js +33 -13
  6. package/dist/cjs/Pointer.js +1 -1
  7. package/dist/cjs/Viewport.d.ts +6 -0
  8. package/dist/cjs/Viewport.js +6 -1
  9. package/dist/cjs/commands/Erase.d.ts +22 -2
  10. package/dist/cjs/commands/Erase.js +22 -2
  11. package/dist/cjs/commands/uniteCommands.d.ts +36 -0
  12. package/dist/cjs/commands/uniteCommands.js +36 -0
  13. package/dist/cjs/components/ImageComponent.d.ts +12 -0
  14. package/dist/cjs/components/ImageComponent.js +16 -9
  15. package/dist/cjs/components/Stroke.d.ts +16 -2
  16. package/dist/cjs/components/Stroke.js +17 -1
  17. package/dist/cjs/components/builders/ArrowBuilder.js +3 -3
  18. package/dist/cjs/components/builders/CircleBuilder.js +3 -3
  19. package/dist/cjs/components/builders/FreehandLineBuilder.js +3 -3
  20. package/dist/cjs/components/builders/LineBuilder.js +3 -3
  21. package/dist/cjs/components/builders/PressureSensitiveFreehandLineBuilder.js +3 -3
  22. package/dist/cjs/components/builders/RectangleBuilder.js +5 -6
  23. package/dist/cjs/components/builders/autocorrect/makeShapeFitAutocorrect.d.ts +3 -0
  24. package/dist/cjs/components/builders/autocorrect/makeShapeFitAutocorrect.js +168 -0
  25. package/dist/cjs/components/builders/autocorrect/makeSnapToGridAutocorrect.d.ts +3 -0
  26. package/dist/cjs/components/builders/autocorrect/makeSnapToGridAutocorrect.js +46 -0
  27. package/dist/cjs/components/builders/types.d.ts +1 -0
  28. package/dist/cjs/image/EditorImage.d.ts +32 -1
  29. package/dist/cjs/image/EditorImage.js +32 -1
  30. package/dist/cjs/rendering/Display.js +8 -1
  31. package/dist/cjs/rendering/RenderablePathSpec.d.ts +5 -1
  32. package/dist/cjs/rendering/RenderablePathSpec.js +4 -0
  33. package/dist/cjs/toolbar/IconProvider.d.ts +2 -0
  34. package/dist/cjs/toolbar/IconProvider.js +17 -0
  35. package/dist/cjs/toolbar/localization.d.ts +3 -0
  36. package/dist/cjs/toolbar/localization.js +4 -1
  37. package/dist/cjs/toolbar/widgets/InsertImageWidget.d.ts +2 -1
  38. package/dist/cjs/toolbar/widgets/InsertImageWidget.js +102 -22
  39. package/dist/cjs/toolbar/widgets/PenToolWidget.d.ts +1 -2
  40. package/dist/cjs/toolbar/widgets/PenToolWidget.js +50 -20
  41. package/dist/cjs/tools/Pen.d.ts +9 -0
  42. package/dist/cjs/tools/Pen.js +77 -3
  43. package/dist/cjs/tools/TextTool.js +5 -1
  44. package/dist/cjs/tools/util/StationaryPenDetector.d.ts +22 -0
  45. package/dist/cjs/tools/util/StationaryPenDetector.js +95 -0
  46. package/dist/cjs/util/ReactiveValue.d.ts +2 -0
  47. package/dist/cjs/util/ReactiveValue.js +2 -0
  48. package/dist/cjs/util/lib.d.ts +1 -0
  49. package/dist/cjs/util/lib.js +4 -1
  50. package/dist/cjs/util/waitForImageLoaded.d.ts +2 -0
  51. package/dist/cjs/util/waitForImageLoaded.js +12 -0
  52. package/dist/cjs/version.js +1 -1
  53. package/dist/mjs/Editor.d.ts +41 -0
  54. package/dist/mjs/Editor.mjs +33 -13
  55. package/dist/mjs/Pointer.mjs +1 -1
  56. package/dist/mjs/Viewport.d.ts +6 -0
  57. package/dist/mjs/Viewport.mjs +6 -1
  58. package/dist/mjs/commands/Erase.d.ts +22 -2
  59. package/dist/mjs/commands/Erase.mjs +22 -2
  60. package/dist/mjs/commands/uniteCommands.d.ts +36 -0
  61. package/dist/mjs/commands/uniteCommands.mjs +36 -0
  62. package/dist/mjs/components/ImageComponent.d.ts +12 -0
  63. package/dist/mjs/components/ImageComponent.mjs +16 -9
  64. package/dist/mjs/components/Stroke.d.ts +16 -2
  65. package/dist/mjs/components/Stroke.mjs +17 -1
  66. package/dist/mjs/components/builders/ArrowBuilder.mjs +3 -2
  67. package/dist/mjs/components/builders/CircleBuilder.mjs +3 -2
  68. package/dist/mjs/components/builders/FreehandLineBuilder.mjs +3 -2
  69. package/dist/mjs/components/builders/LineBuilder.mjs +3 -2
  70. package/dist/mjs/components/builders/PressureSensitiveFreehandLineBuilder.mjs +3 -2
  71. package/dist/mjs/components/builders/RectangleBuilder.mjs +5 -4
  72. package/dist/mjs/components/builders/autocorrect/makeShapeFitAutocorrect.d.ts +3 -0
  73. package/dist/mjs/components/builders/autocorrect/makeShapeFitAutocorrect.mjs +166 -0
  74. package/dist/mjs/components/builders/autocorrect/makeSnapToGridAutocorrect.d.ts +3 -0
  75. package/dist/mjs/components/builders/autocorrect/makeSnapToGridAutocorrect.mjs +44 -0
  76. package/dist/mjs/components/builders/types.d.ts +1 -0
  77. package/dist/mjs/image/EditorImage.d.ts +32 -1
  78. package/dist/mjs/image/EditorImage.mjs +32 -1
  79. package/dist/mjs/rendering/Display.mjs +8 -1
  80. package/dist/mjs/rendering/RenderablePathSpec.d.ts +5 -1
  81. package/dist/mjs/rendering/RenderablePathSpec.mjs +4 -0
  82. package/dist/mjs/toolbar/IconProvider.d.ts +2 -0
  83. package/dist/mjs/toolbar/IconProvider.mjs +17 -0
  84. package/dist/mjs/toolbar/localization.d.ts +3 -0
  85. package/dist/mjs/toolbar/localization.mjs +4 -1
  86. package/dist/mjs/toolbar/widgets/InsertImageWidget.d.ts +2 -1
  87. package/dist/mjs/toolbar/widgets/InsertImageWidget.mjs +102 -22
  88. package/dist/mjs/toolbar/widgets/PenToolWidget.d.ts +1 -2
  89. package/dist/mjs/toolbar/widgets/PenToolWidget.mjs +50 -20
  90. package/dist/mjs/tools/Pen.d.ts +9 -0
  91. package/dist/mjs/tools/Pen.mjs +77 -3
  92. package/dist/mjs/tools/TextTool.mjs +5 -1
  93. package/dist/mjs/tools/util/StationaryPenDetector.d.ts +22 -0
  94. package/dist/mjs/tools/util/StationaryPenDetector.mjs +92 -0
  95. package/dist/mjs/util/ReactiveValue.d.ts +2 -0
  96. package/dist/mjs/util/ReactiveValue.mjs +2 -0
  97. package/dist/mjs/util/lib.d.ts +1 -0
  98. package/dist/mjs/util/lib.mjs +1 -0
  99. package/dist/mjs/util/waitForImageLoaded.d.ts +2 -0
  100. package/dist/mjs/util/waitForImageLoaded.mjs +10 -0
  101. package/dist/mjs/version.mjs +1 -1
  102. package/package.json +3 -3
  103. package/src/Editor.scss +7 -0
  104. package/src/toolbar/AbstractToolbar.scss +20 -0
  105. package/src/toolbar/toolbar.scss +1 -1
  106. package/src/toolbar/widgets/InsertImageWidget.scss +6 -1
  107. package/src/toolbar/widgets/PenToolWidget.scss +33 -0
  108. package/src/tools/SelectionTool/SelectionTool.scss +6 -0
  109. package/src/toolbar/widgets/PenToolWidget.css +0 -2
package/dist/Editor.css CHANGED
@@ -6,12 +6,16 @@
6
6
  }
7
7
  :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content img {
8
8
  max-width: min(50vw, 75%);
9
- max-height: 50vh;
9
+ max-height: min(300px, 50vh);
10
10
  /* Center */
11
11
  display: block;
12
12
  margin-left: auto;
13
13
  margin-right: auto;
14
14
  }
15
+ :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .insert-image-image-status-view {
16
+ display: flex;
17
+ justify-content: space-between;
18
+ }
15
19
  :root .insert-image-widget-dropdown-content.insert-image-widget-dropdown-content.insert-image-widget-dropdown-content .action-button-row {
16
20
  margin-top: 4px;
17
21
  display: flex;
@@ -57,6 +61,30 @@
57
61
  padding: 4px;
58
62
  }
59
63
 
64
+ :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons {
65
+ display: flex;
66
+ justify-content: stretch;
67
+ padding-top: 0;
68
+ padding-bottom: 5px;
69
+ direction: ltr;
70
+ }
71
+ :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons > * {
72
+ flex-grow: 1;
73
+ text-align: start;
74
+ margin-inline-end: 5px;
75
+ }
76
+ :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons > * .icon {
77
+ margin: 0;
78
+ margin-inline-start: 4px;
79
+ margin-inline-end: 10px;
80
+ }
81
+ :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons > :nth-child(1) {
82
+ direction: ltr;
83
+ }
84
+ :root .toolbar--pen-tool-toggle-buttons.toolbar--pen-tool-toggle-buttons > :last-child {
85
+ direction: rtl;
86
+ }
87
+
60
88
  .toolbar-zoomLevelEditor {
61
89
  display: flex;
62
90
  flex-direction: row;
@@ -460,6 +488,23 @@
460
488
  justify-content: center;
461
489
  }
462
490
 
491
+ .toolbar-element .toolbar--toggle-button {
492
+ color: var(--foreground-color-1);
493
+ font-weight: normal;
494
+ }
495
+ .toolbar-element .toolbar--toggle-button[aria-checked=true] {
496
+ background: var(--selection-background-color);
497
+ color: var(--selection-foreground-color);
498
+ }
499
+ .toolbar-element .toolbar--toggle-button > .icon {
500
+ width: 25px;
501
+ height: 25px;
502
+ margin: 0 5px;
503
+ }
504
+ .toolbar-element .toolbar--toggle-button > * {
505
+ vertical-align: middle;
506
+ }
507
+
463
508
  .toolbar-closeColorPickerOverlay {
464
509
  display: none;
465
510
  position: fixed;
@@ -1143,6 +1188,7 @@
1143
1188
 
1144
1189
  .overlay.handleOverlay {
1145
1190
  touch-action: none;
1191
+ direction: ltr;
1146
1192
  }
1147
1193
  .overlay.handleOverlay, .overlay.handleOverlay .selection-tool-selection-outer-container {
1148
1194
  height: 0;
@@ -1345,6 +1391,7 @@ visible.
1345
1391
  height: 400px;
1346
1392
  min-height: 220px;
1347
1393
  min-width: 100px;
1394
+ writing-mode: horizontal-tb;
1348
1395
  box-sizing: border-box;
1349
1396
  display: flex;
1350
1397
  flex-direction: column-reverse;