js-draw 1.22.0 → 1.24.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (95) hide show
  1. package/README.md +1 -1
  2. package/dist/Editor.css +21 -0
  3. package/dist/bundle.js +2 -2
  4. package/dist/bundledStyles.js +1 -1
  5. package/dist/cjs/Editor.d.ts +8 -4
  6. package/dist/cjs/Editor.js +73 -13
  7. package/dist/cjs/SVGLoader/SVGLoader.js +19 -7
  8. package/dist/cjs/Viewport.d.ts +3 -1
  9. package/dist/cjs/Viewport.js +1 -2
  10. package/dist/cjs/components/AbstractComponent.d.ts +2 -2
  11. package/dist/cjs/components/AbstractComponent.js +1 -1
  12. package/dist/cjs/components/BackgroundComponent.js +17 -7
  13. package/dist/cjs/components/SVGGlobalAttributesObject.js +17 -7
  14. package/dist/cjs/components/UnknownSVGObject.js +17 -7
  15. package/dist/cjs/components/builders/ArrowBuilder.d.ts +1 -1
  16. package/dist/cjs/components/builders/ArrowBuilder.js +1 -1
  17. package/dist/cjs/components/lib.js +17 -7
  18. package/dist/cjs/image/EditorImage.d.ts +30 -7
  19. package/dist/cjs/image/EditorImage.js +47 -14
  20. package/dist/cjs/rendering/renderers/CanvasRenderer.d.ts +2 -25
  21. package/dist/cjs/rendering/renderers/CanvasRenderer.js +2 -25
  22. package/dist/cjs/rendering/renderers/SVGRenderer.js +2 -2
  23. package/dist/cjs/testing/sendPenEvent.js +17 -7
  24. package/dist/cjs/testing/sendTouchEvent.js +17 -7
  25. package/dist/cjs/toolbar/AbstractToolbar.d.ts +19 -0
  26. package/dist/cjs/toolbar/AbstractToolbar.js +19 -0
  27. package/dist/cjs/toolbar/EdgeToolbar.d.ts +1 -1
  28. package/dist/cjs/toolbar/IconProvider.d.ts +5 -1
  29. package/dist/cjs/toolbar/IconProvider.js +112 -146
  30. package/dist/cjs/toolbar/localization.js +2 -2
  31. package/dist/cjs/toolbar/widgets/BaseWidget.d.ts +1 -1
  32. package/dist/cjs/toolbar/widgets/BaseWidget.js +1 -1
  33. package/dist/cjs/toolbar/widgets/DocumentPropertiesWidget.js +17 -7
  34. package/dist/cjs/toolbar/widgets/HandToolWidget.js +17 -7
  35. package/dist/cjs/tools/InputFilter/ContextMenuRecognizer.js +17 -7
  36. package/dist/cjs/tools/PanZoom.js +1 -1
  37. package/dist/cjs/tools/Pen.d.ts +13 -0
  38. package/dist/cjs/tools/Pen.js +30 -7
  39. package/dist/cjs/tools/SelectionTool/Selection.js +17 -7
  40. package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.js +1 -1
  41. package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts +2 -2
  42. package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.js +1 -1
  43. package/dist/cjs/tools/SoundUITool.js +1 -1
  44. package/dist/cjs/tools/TextTool.d.ts +4 -4
  45. package/dist/cjs/tools/TextTool.js +45 -51
  46. package/dist/cjs/tools/ToolController.js +17 -7
  47. package/dist/cjs/tools/UndoRedoShortcut.js +2 -2
  48. package/dist/cjs/tools/lib.d.ts +1 -0
  49. package/dist/cjs/tools/lib.js +3 -1
  50. package/dist/cjs/util/ClipboardHandler.js +1 -0
  51. package/dist/cjs/util/cloneElementWithStyles.js +1 -1
  52. package/dist/cjs/util/createElement.d.ts +62 -0
  53. package/dist/cjs/util/createElement.js +53 -0
  54. package/dist/cjs/version.js +1 -1
  55. package/dist/mjs/Editor.d.ts +8 -4
  56. package/dist/mjs/Editor.mjs +56 -6
  57. package/dist/mjs/SVGLoader/SVGLoader.mjs +2 -0
  58. package/dist/mjs/Viewport.d.ts +3 -1
  59. package/dist/mjs/Viewport.mjs +1 -2
  60. package/dist/mjs/components/AbstractComponent.d.ts +2 -2
  61. package/dist/mjs/components/AbstractComponent.mjs +1 -1
  62. package/dist/mjs/components/builders/ArrowBuilder.d.ts +1 -1
  63. package/dist/mjs/components/builders/ArrowBuilder.mjs +1 -1
  64. package/dist/mjs/image/EditorImage.d.ts +30 -7
  65. package/dist/mjs/image/EditorImage.mjs +30 -7
  66. package/dist/mjs/rendering/renderers/CanvasRenderer.d.ts +2 -25
  67. package/dist/mjs/rendering/renderers/CanvasRenderer.mjs +2 -25
  68. package/dist/mjs/rendering/renderers/SVGRenderer.mjs +2 -2
  69. package/dist/mjs/toolbar/AbstractToolbar.d.ts +19 -0
  70. package/dist/mjs/toolbar/AbstractToolbar.mjs +19 -0
  71. package/dist/mjs/toolbar/EdgeToolbar.d.ts +1 -1
  72. package/dist/mjs/toolbar/IconProvider.d.ts +5 -1
  73. package/dist/mjs/toolbar/IconProvider.mjs +112 -146
  74. package/dist/mjs/toolbar/localization.mjs +2 -2
  75. package/dist/mjs/toolbar/widgets/BaseWidget.d.ts +1 -1
  76. package/dist/mjs/toolbar/widgets/BaseWidget.mjs +1 -1
  77. package/dist/mjs/tools/PanZoom.mjs +1 -1
  78. package/dist/mjs/tools/Pen.d.ts +13 -0
  79. package/dist/mjs/tools/Pen.mjs +13 -0
  80. package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs +1 -1
  81. package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts +2 -2
  82. package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.mjs +1 -1
  83. package/dist/mjs/tools/SoundUITool.mjs +1 -1
  84. package/dist/mjs/tools/TextTool.d.ts +4 -4
  85. package/dist/mjs/tools/TextTool.mjs +45 -51
  86. package/dist/mjs/tools/UndoRedoShortcut.mjs +2 -2
  87. package/dist/mjs/tools/lib.d.ts +1 -0
  88. package/dist/mjs/tools/lib.mjs +1 -0
  89. package/dist/mjs/util/ClipboardHandler.mjs +1 -0
  90. package/dist/mjs/util/cloneElementWithStyles.mjs +1 -1
  91. package/dist/mjs/util/createElement.d.ts +62 -0
  92. package/dist/mjs/util/createElement.mjs +47 -0
  93. package/dist/mjs/version.mjs +1 -1
  94. package/package.json +4 -4
  95. package/src/Editor.scss +31 -0
@@ -15,31 +15,32 @@ const Viewport_1 = __importDefault(require("../Viewport"));
15
15
  const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
16
16
  const PolylineBuilder_1 = require("../components/builders/PolylineBuilder");
17
17
  const Eraser_1 = require("../tools/Eraser");
18
+ const createElement_1 = require("../util/createElement");
18
19
  const svgNamespace = 'http://www.w3.org/2000/svg';
19
- const iconColorFill = `
20
- style='fill: var(--icon-color);'
21
- `;
22
- const iconColorStrokeFill = `
23
- style='fill: var(--icon-color); stroke: var(--icon-color);'
24
- `;
25
20
  let checkerboardIdCounter = 0;
26
21
  const makeCheckerboardPattern = () => {
27
22
  const id = `checkerboard-${checkerboardIdCounter++}`;
28
- const patternDef = `
29
- <pattern
30
- id='${id}'
31
- viewBox='0,0,10,10'
32
- width='20%'
33
- height='20%'
34
- patternUnits='userSpaceOnUse'
35
- >
36
- <rect x='0' y='0' width='10' height='10' fill='white'/>
37
- <rect x='0' y='0' width='5' height='5' fill='gray'/>
38
- <rect x='5' y='5' width='5' height='5' fill='gray'/>
39
- </pattern>
40
- `;
23
+ const patternElement = (0, createElement_1.createSvgElement)('pattern', {
24
+ id: id,
25
+ viewBox: '0,0,10,10',
26
+ width: '20%',
27
+ height: '20%',
28
+ patternUnits: 'userSpaceOnUse',
29
+ children: (0, createElement_1.createSvgElements)('rect', [
30
+ { x: 0, y: 0, width: 10, height: 10, fill: 'white' },
31
+ { x: 0, y: 0, width: 5, height: 5, fill: 'gray' },
32
+ { x: 5, y: 5, width: 5, height: 5, fill: 'gray' },
33
+ ]),
34
+ });
41
35
  const patternRef = `url(#${id})`;
42
- return { patternDef, patternRef };
36
+ return {
37
+ patternDefElement: patternElement,
38
+ // @deprecated use patternDefElement
39
+ get patternDef() {
40
+ return patternElement.innerHTML;
41
+ },
42
+ patternRef,
43
+ };
43
44
  };
44
45
  const makeRedoIcon = (mirror) => {
45
46
  const icon = document.createElementNS(svgNamespace, 'svg');
@@ -55,11 +56,14 @@ const makeRedoIcon = (mirror) => {
55
56
  transform-origin: center;
56
57
  }
57
58
  </style>
58
- <path
59
- d='M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80'
60
- class='toolbar-svg-undo-redo-icon'
61
- style='${mirror ? 'transform: scale(-1, 1);' : ''}'/>
62
59
  `;
60
+ const path = document.createElementNS(svgNamespace, 'path');
61
+ path.setAttribute('d', 'M20,20 A15,15 0 0 1 70,80 L80,90 L60,70 L65,90 L87,90 L65,80');
62
+ path.classList.add('toolbar-svg-undo-redo-icon');
63
+ if (mirror) {
64
+ path.style.transform = 'scale(-1, 1)';
65
+ }
66
+ icon.appendChild(path);
63
67
  icon.setAttribute('viewBox', '0 0 100 100');
64
68
  return icon;
65
69
  };
@@ -107,65 +111,62 @@ class IconProvider {
107
111
  return makeRedoIcon(false);
108
112
  }
109
113
  makeDropdownIcon() {
110
- const icon = document.createElementNS(svgNamespace, 'svg');
111
- icon.innerHTML = `
112
- <g>
113
- <path
114
- d='M5,10 L50,90 L95,10 Z'
115
- ${iconColorFill}
116
- />
117
- </g>
118
- `;
114
+ const icon = this.makeIconFromPath('M5,10 L50,90 L95,10 Z');
119
115
  icon.setAttribute('viewBox', '-10 -10 110 110');
120
116
  return icon;
121
117
  }
122
118
  makeEraserIcon(eraserSize, mode) {
123
- const icon = document.createElementNS(svgNamespace, 'svg');
124
119
  eraserSize ??= 10;
125
120
  const scaledSize = eraserSize / 4;
126
121
  const eraserColor = '#ff70af';
127
122
  // Draw an eraser-like shape. Created with Inkscape
128
- icon.innerHTML = `
129
- <defs>
130
- <linearGradient id="dash-pattern">
131
- <stop offset="80%" stop-color="${eraserColor}"/>
132
- <stop offset="85%" stop-color="white"/>
133
- <stop offset="90%" stop-color="${eraserColor}"/>
134
- </linearGradient>
135
- </defs>
136
- <g>
137
- <path
138
- style="fill:${mode === Eraser_1.EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor}"
139
- stroke="black"
140
- transform="rotate(41.35)"
141
- d="M 52.5 27
142
- C 50 28.9 48.9 31.7 48.9 34.8
143
- L 48.9 39.8
144
- C 48.9 45.3 53.4 49.8 58.9 49.8
145
- L 103.9 49.8
146
- C 105.8 49.8 107.6 49.2 109.1 48.3
147
- L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
148
- L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
149
- C 113.4 43.5 113.9 41.7 113.9 39.8
150
- L 113.9 34.8
151
- C 113.9 29.3 109.4 24.8 103.9 24.8
152
- L 58.9 24.8
153
- C 56.5 24.8 54.3 25.7 52.5 27
154
- z "
155
- id="path438" />
156
-
157
- <rect
158
- stroke="#cc8077"
159
- ${iconColorFill}
160
- id="rect218"
161
- width="65"
162
- height="75"
163
- x="48.9"
164
- y="-38.7"
165
- transform="rotate(41.35)" />
166
- </g>
167
- `;
168
- icon.setAttribute('viewBox', '0 0 120 120');
123
+ const icon = (0, createElement_1.createSvgElement)('svg', {
124
+ viewBox: '0 0 120 120',
125
+ children: [
126
+ (0, createElement_1.createSvgElement)('defs', {
127
+ children: [
128
+ (0, createElement_1.createSvgElement)('linearGradient', {
129
+ id: 'dash-pattern',
130
+ children: (0, createElement_1.createSvgElements)('stop', [
131
+ { offset: '80%', 'stop-color': eraserColor },
132
+ { offset: '85%', 'stop-color': 'white' },
133
+ { offset: '90%', 'stop-color': eraserColor },
134
+ ]),
135
+ }),
136
+ ],
137
+ }),
138
+ (0, createElement_1.createSvgElement)('path', {
139
+ fill: mode === Eraser_1.EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor,
140
+ stroke: 'black',
141
+ transform: 'rotate(41.35)',
142
+ d: `
143
+ M 52.5 27
144
+ C 50 28.9 48.9 31.7 48.9 34.8
145
+ L 48.9 39.8
146
+ C 48.9 45.3 53.4 49.8 58.9 49.8
147
+ L 103.9 49.8
148
+ C 105.8 49.8 107.6 49.2 109.1 48.3
149
+ L 110.2 ${scaledSize + 49.5} L 159.7 ${scaledSize + 5}
150
+ L 157.7 ${-scaledSize + 5.2} L 112.4 ${49.5 - scaledSize}
151
+ C 113.4 43.5 113.9 41.7 113.9 39.8
152
+ L 113.9 34.8
153
+ C 113.9 29.3 109.4 24.8 103.9 24.8
154
+ L 58.9 24.8
155
+ C 56.5 24.8 54.3 25.7 52.5 27
156
+ z
157
+ `,
158
+ }),
159
+ (0, createElement_1.createSvgElement)('rect', {
160
+ stroke: '#cc8077',
161
+ fill: 'var(--icon-color)',
162
+ width: 65,
163
+ height: 75,
164
+ x: 48.9,
165
+ y: -38.7,
166
+ transform: 'rotate(41.35)',
167
+ }),
168
+ ],
169
+ });
169
170
  return icon;
170
171
  }
171
172
  makeSelectionIcon() {
@@ -173,8 +174,8 @@ class IconProvider {
173
174
  // Draw a cursor-like shape
174
175
  icon.innerHTML = `
175
176
  <g>
176
- <rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
177
- <rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
177
+ <rect x="10" y="10" width="70" height="70" fill="pink" stroke="black"/>
178
+ <rect x="75" y="75" width="10" height="10" fill="white" stroke="black"/>
178
179
  </g>
179
180
  `;
180
181
  icon.setAttribute('viewBox', '0 0 100 100');
@@ -437,8 +438,6 @@ class IconProvider {
437
438
  const strokeSize = Math.round(Math.sqrt(penStyle.thickness) * 4);
438
439
  const color = penStyle.color;
439
440
  const rounded = this.isRoundedTipPen(penStyle);
440
- const icon = document.createElementNS(svgNamespace, 'svg');
441
- icon.setAttribute('viewBox', '0 0 100 100');
442
441
  const tipThickness = strokeSize / 2;
443
442
  const inkTipPath = `
444
443
  M ${15 - tipThickness},${80 - tipThickness}
@@ -471,71 +470,35 @@ class IconProvider {
471
470
  const pencilTipColor = math_1.Color4.fromHex('#f4d7d7');
472
471
  const tipColor = pencilTipColor.mix(color, tipThickness / 40 - 0.1).toHexString();
473
472
  const checkerboardPattern = makeCheckerboardPattern();
474
- const ink = `
475
- <path
476
- fill="${checkerboardPattern.patternRef}"
477
- d="${inkTipPath}"
478
- />
479
- <path
480
- fill="${checkerboardPattern.patternRef}"
481
- d="${inkTrailPath}"
482
- />
483
- <path
484
- fill="${color}"
485
- d="${inkTipPath}"
486
- />
487
- <path
488
- fill="${color}"
489
- d="${inkTrailPath}"
490
- />
491
- `;
492
- const penTip = `
493
- <path
494
- fill="${checkerboardPattern.patternRef}"
495
- d="${penTipPath}"
496
- />
497
- <path
498
- fill="${tipColor}"
499
- stroke="${color}"
500
- d="${penTipPath}"
501
- />
502
- `;
503
- const grip = `
504
- <path
505
- ${iconColorStrokeFill}
506
- d="${gripMainPath}"
507
- />
508
-
509
- <!-- shadows -->
510
- <path
511
- fill="rgba(150, 150, 150, 0.3)"
512
- d="${gripShadow1Path}"
513
- />
514
- <path
515
- fill="rgba(100, 100, 100, 0.2)"
516
- d="${gripShadow2Path}"
517
- />
518
-
519
- <!-- color bubble -->
520
- <path
521
- fill="${checkerboardPattern.patternRef}"
522
- d="${colorBubblePath}"
523
- />
524
- <path
525
- fill="${color}"
526
- d="${colorBubblePath}"
527
- />
528
- `;
529
- icon.innerHTML = `
530
- <defs>
531
- ${checkerboardPattern.patternDef}
532
- </defs>
533
- <g>
534
- ${ink}
535
- ${penTip}
536
- ${grip}
537
- </g>
538
- `;
473
+ const colorString = color.toHexString();
474
+ const ink = (0, createElement_1.createSvgPaths)({
475
+ fill: checkerboardPattern.patternRef,
476
+ d: inkTipPath,
477
+ }, {
478
+ fill: checkerboardPattern.patternRef,
479
+ d: inkTrailPath,
480
+ }, {
481
+ fill: colorString,
482
+ d: inkTipPath,
483
+ }, {
484
+ fill: colorString,
485
+ d: inkTrailPath,
486
+ });
487
+ const penTip = (0, createElement_1.createSvgPaths)({ fill: checkerboardPattern.patternRef, d: penTipPath }, { fill: tipColor, stroke: colorString, d: penTipPath });
488
+ const grip = (0, createElement_1.createSvgPaths)({ fill: 'var(--icon-color)', stroke: 'var(--icon-color)', d: gripMainPath },
489
+ // Shadows
490
+ { fill: 'rgba(150, 150, 150, 0.3)', d: gripShadow1Path }, { fill: 'rgba(100, 100, 100, 0.2)', d: gripShadow2Path },
491
+ // Color bubble
492
+ { fill: checkerboardPattern.patternRef, d: colorBubblePath }, { fill: colorString, d: colorBubblePath });
493
+ const icon = document.createElementNS(svgNamespace, 'svg');
494
+ icon.setAttribute('viewBox', '0 0 100 100');
495
+ const iconMainContent = (0, createElement_1.createSvgElement)('g', {
496
+ children: [ink, penTip, grip].flat(),
497
+ });
498
+ const defs = (0, createElement_1.createSvgElement)('defs', {
499
+ children: [checkerboardPattern.patternDefElement],
500
+ });
501
+ icon.replaceChildren(defs, iconMainContent);
539
502
  return icon;
540
503
  }
541
504
  makeIconFromFactory(penStyle) {
@@ -567,7 +530,7 @@ class IconProvider {
567
530
  if (includeTransparencyGrid) {
568
531
  const checkerboardPattern = makeCheckerboardPattern();
569
532
  const defs = document.createElementNS(svgNamespace, 'defs');
570
- defs.innerHTML = checkerboardPattern.patternDef;
533
+ defs.appendChild(checkerboardPattern.patternDefElement);
571
534
  icon.appendChild(defs);
572
535
  const background = document.createElementNS(svgNamespace, 'g');
573
536
  icon.appendChild(background);
@@ -641,7 +604,7 @@ class IconProvider {
641
604
  if (color) {
642
605
  const checkerboardPattern = makeCheckerboardPattern();
643
606
  const defs = document.createElementNS(svgNamespace, 'defs');
644
- defs.innerHTML = checkerboardPattern.patternDef;
607
+ defs.appendChild(checkerboardPattern.patternDefElement);
645
608
  icon.appendChild(defs);
646
609
  const fluidBackground = document.createElementNS(svgNamespace, 'path');
647
610
  const fluid = document.createElementNS(svgNamespace, 'path');
@@ -846,6 +809,9 @@ class IconProvider {
846
809
  * @returns An object with both the definition of a checkerboard pattern and the syntax to
847
810
  * reference that pattern. The defs provided by this function should be wrapped within a
848
811
  * `<defs></defs>` element.
812
+ *
813
+ * **Note**: This function's return value includes both `patternDefElement` (which returns
814
+ * an Element) and a (deprecated) `patternDef` string. Avoid using the `patternDef` result.
849
815
  */
850
816
  makeCheckerboardPattern() {
851
817
  return makeCheckerboardPattern();
@@ -48,7 +48,7 @@ exports.defaultToolbarLocalization = {
48
48
  about: 'About',
49
49
  inputStabilization: 'Stabilization',
50
50
  strokeAutocorrect: 'Autocorrect',
51
- touchPanning: 'Touchscreen panning',
51
+ touchPanning: 'Scroll with touch',
52
52
  roundedTipPen: 'Round',
53
53
  roundedTipPen2: 'Polyline',
54
54
  flatTipPen: 'Flat',
@@ -75,7 +75,7 @@ exports.defaultToolbarLocalization = {
75
75
  handDropdown__zoomOutHelpText: 'Zooms out.',
76
76
  handDropdown__resetViewHelpText: 'Resets the zoom level to 100% and resets scroll.',
77
77
  handDropdown__zoomDisplayHelpText: 'Shows the current zoom level. 100% shows the image at its actual size.',
78
- handDropdown__touchPanningHelpText: 'When enabled, touch gestures move the image rather than select or draw.',
78
+ handDropdown__touchPanningHelpText: 'When enabled, touchscreen gestures move the image rather than select or draw.',
79
79
  handDropdown__lockRotationHelpText: 'When enabled, prevents touch gestures from rotating the screen.',
80
80
  eraserDropdown__baseHelpText: 'This tool removes strokes, images, and text under the cursor.',
81
81
  eraserDropdown__thicknessHelpText: 'Changes the size of the eraser.',
@@ -98,7 +98,7 @@ export default abstract class BaseWidget {
98
98
  addTo(parent: HTMLElement): HTMLElement;
99
99
  /**
100
100
  * Remove this. This allows the widget to be added to a toolbar again
101
- * in the future using {@link addTo}.
101
+ * in the future using `addTo`.
102
102
  */
103
103
  remove(): void;
104
104
  focus(): void;
@@ -306,7 +306,7 @@ class BaseWidget {
306
306
  }
307
307
  /**
308
308
  * Remove this. This allows the widget to be added to a toolbar again
309
- * in the future using {@link addTo}.
309
+ * in the future using `addTo`.
310
310
  */
311
311
  remove() {
312
312
  this.container.remove();
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
37
  };
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
37
  };
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
37
  };
@@ -433,7 +433,7 @@ class PanZoom extends BaseTool_1.default {
433
433
  translation = translation.times(-1);
434
434
  rotation = rotation * -1;
435
435
  scale = 1 / scale;
436
- // Work around an issue that seems to be related to rotation matricies losing precision on inversion.
436
+ // Work around an issue that seems to be related to rotation matrices losing precision on inversion.
437
437
  // TODO: Figure out why and implement a better solution.
438
438
  if (rotation !== 0) {
439
439
  rotation += 0.0001;
@@ -11,6 +11,12 @@ export interface PenStyle {
11
11
  readonly thickness: number;
12
12
  readonly factory: ComponentBuilderFactory;
13
13
  }
14
+ /**
15
+ * A tool that allows drawing shapes and freehand lines.
16
+ *
17
+ * To change the type of shape drawn by the pen (e.g. to switch to the rectangle
18
+ * pen type), see {@link setStrokeFactory}.
19
+ */
14
20
  export default class Pen extends BaseTool {
15
21
  private editor;
16
22
  protected builder: ComponentBuilder | null;
@@ -42,6 +48,13 @@ export default class Pen extends BaseTool {
42
48
  private noteUpdated;
43
49
  setColor(color: Color4): void;
44
50
  setThickness(thickness: number): void;
51
+ /**
52
+ * Changes the type of stroke created by the pen. The given `factory` can be one of the built-in
53
+ * stroke factories (e.g. {@link makeFreehandLineBuilder}) or a custom stroke factory.
54
+ *
55
+ * Example:
56
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
57
+ */
45
58
  setStrokeFactory(factory: ComponentBuilderFactory): void;
46
59
  setHasStabilization(hasStabilization: boolean): void;
47
60
  setStrokeAutocorrectEnabled(enabled: boolean): void;
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
37
  };
@@ -37,6 +47,12 @@ const keybindings_2 = require("./keybindings");
37
47
  const InputStabilizer_1 = __importDefault(require("./InputFilter/InputStabilizer"));
38
48
  const ReactiveValue_1 = require("../util/ReactiveValue");
39
49
  const StationaryPenDetector_1 = __importStar(require("./util/StationaryPenDetector"));
50
+ /**
51
+ * A tool that allows drawing shapes and freehand lines.
52
+ *
53
+ * To change the type of shape drawn by the pen (e.g. to switch to the rectangle
54
+ * pen type), see {@link setStrokeFactory}.
55
+ */
40
56
  class Pen extends BaseTool_1.default {
41
57
  constructor(editor, description, style) {
42
58
  super(editor.notifier, description);
@@ -272,6 +288,13 @@ class Pen extends BaseTool_1.default {
272
288
  });
273
289
  }
274
290
  }
291
+ /**
292
+ * Changes the type of stroke created by the pen. The given `factory` can be one of the built-in
293
+ * stroke factories (e.g. {@link makeFreehandLineBuilder}) or a custom stroke factory.
294
+ *
295
+ * Example:
296
+ * [[include:doc-pages/inline-examples/changing-pen-types.md]]
297
+ */
275
298
  setStrokeFactory(factory) {
276
299
  if (factory !== this.style.factory) {
277
300
  this.styleValue.set({
@@ -19,13 +19,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
19
19
  }) : function(o, v) {
20
20
  o["default"] = v;
21
21
  });
22
- var __importStar = (this && this.__importStar) || function (mod) {
23
- if (mod && mod.__esModule) return mod;
24
- var result = {};
25
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
26
- __setModuleDefault(result, mod);
27
- return result;
28
- };
22
+ var __importStar = (this && this.__importStar) || (function () {
23
+ var ownKeys = function(o) {
24
+ ownKeys = Object.getOwnPropertyNames || function (o) {
25
+ var ar = [];
26
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
27
+ return ar;
28
+ };
29
+ return ownKeys(o);
30
+ };
31
+ return function (mod) {
32
+ if (mod && mod.__esModule) return mod;
33
+ var result = {};
34
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
35
+ __setModuleDefault(result, mod);
36
+ return result;
37
+ };
38
+ })();
29
39
  var __importDefault = (this && this.__importDefault) || function (mod) {
30
40
  return (mod && mod.__esModule) ? mod : { "default": mod };
31
41
  };
@@ -12,7 +12,7 @@ class SelectionMenuShortcut {
12
12
  this.element = document.createElement('div');
13
13
  this.element.classList.add(`${SelectionTool_1.cssPrefix}handle`, `${SelectionTool_1.cssPrefix}selection-menu`);
14
14
  this.element.style.setProperty('--vertical-offset', `${verticalOffset}px`);
15
- this.onClick = async () => {
15
+ this.onClick = () => {
16
16
  const anchor = this.getBBoxCanvasCoords().center;
17
17
  showContextMenu(anchor);
18
18
  };
@@ -1,6 +1,6 @@
1
1
  import Editor from '../../../Editor';
2
2
  declare const makeClipboardErrorHandlers: (editor: Editor) => {
3
- onCopyError(error: Error | unknown): Promise<void>;
4
- onPasteError(error: Error | unknown): void;
3
+ onCopyError(error: unknown): void;
4
+ onPasteError(error: unknown): void;
5
5
  };
6
6
  export default makeClipboardErrorHandlers;
@@ -21,7 +21,7 @@ const makeClipboardErrorHandlers = (editor) => {
21
21
  return dialog;
22
22
  };
23
23
  return {
24
- async onCopyError(error) {
24
+ onCopyError(error) {
25
25
  const dialog = makeErrorDialog(error);
26
26
  const textboxLabel = document.createElement('label');
27
27
  textboxLabel.textContent = editor.localization.copyPasteError__copyRetry;
@@ -78,7 +78,7 @@ class SoundFeedback {
78
78
  this.boundaryGain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.25);
79
79
  }
80
80
  close() {
81
- this.ctx.close();
81
+ void this.ctx.close();
82
82
  this.closed = true;
83
83
  }
84
84
  }