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.
- package/README.md +1 -1
- package/dist/Editor.css +21 -0
- package/dist/bundle.js +2 -2
- package/dist/bundledStyles.js +1 -1
- package/dist/cjs/Editor.d.ts +8 -4
- package/dist/cjs/Editor.js +73 -13
- package/dist/cjs/SVGLoader/SVGLoader.js +19 -7
- package/dist/cjs/Viewport.d.ts +3 -1
- package/dist/cjs/Viewport.js +1 -2
- package/dist/cjs/components/AbstractComponent.d.ts +2 -2
- package/dist/cjs/components/AbstractComponent.js +1 -1
- package/dist/cjs/components/BackgroundComponent.js +17 -7
- package/dist/cjs/components/SVGGlobalAttributesObject.js +17 -7
- package/dist/cjs/components/UnknownSVGObject.js +17 -7
- package/dist/cjs/components/builders/ArrowBuilder.d.ts +1 -1
- package/dist/cjs/components/builders/ArrowBuilder.js +1 -1
- package/dist/cjs/components/lib.js +17 -7
- package/dist/cjs/image/EditorImage.d.ts +30 -7
- package/dist/cjs/image/EditorImage.js +47 -14
- package/dist/cjs/rendering/renderers/CanvasRenderer.d.ts +2 -25
- package/dist/cjs/rendering/renderers/CanvasRenderer.js +2 -25
- package/dist/cjs/rendering/renderers/SVGRenderer.js +2 -2
- package/dist/cjs/testing/sendPenEvent.js +17 -7
- package/dist/cjs/testing/sendTouchEvent.js +17 -7
- package/dist/cjs/toolbar/AbstractToolbar.d.ts +19 -0
- package/dist/cjs/toolbar/AbstractToolbar.js +19 -0
- package/dist/cjs/toolbar/EdgeToolbar.d.ts +1 -1
- package/dist/cjs/toolbar/IconProvider.d.ts +5 -1
- package/dist/cjs/toolbar/IconProvider.js +112 -146
- package/dist/cjs/toolbar/localization.js +2 -2
- package/dist/cjs/toolbar/widgets/BaseWidget.d.ts +1 -1
- package/dist/cjs/toolbar/widgets/BaseWidget.js +1 -1
- package/dist/cjs/toolbar/widgets/DocumentPropertiesWidget.js +17 -7
- package/dist/cjs/toolbar/widgets/HandToolWidget.js +17 -7
- package/dist/cjs/tools/InputFilter/ContextMenuRecognizer.js +17 -7
- package/dist/cjs/tools/PanZoom.js +1 -1
- package/dist/cjs/tools/Pen.d.ts +13 -0
- package/dist/cjs/tools/Pen.js +30 -7
- package/dist/cjs/tools/SelectionTool/Selection.js +17 -7
- package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.js +1 -1
- package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts +2 -2
- package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.js +1 -1
- package/dist/cjs/tools/SoundUITool.js +1 -1
- package/dist/cjs/tools/TextTool.d.ts +4 -4
- package/dist/cjs/tools/TextTool.js +45 -51
- package/dist/cjs/tools/ToolController.js +17 -7
- package/dist/cjs/tools/UndoRedoShortcut.js +2 -2
- package/dist/cjs/tools/lib.d.ts +1 -0
- package/dist/cjs/tools/lib.js +3 -1
- package/dist/cjs/util/ClipboardHandler.js +1 -0
- package/dist/cjs/util/cloneElementWithStyles.js +1 -1
- package/dist/cjs/util/createElement.d.ts +62 -0
- package/dist/cjs/util/createElement.js +53 -0
- package/dist/cjs/version.js +1 -1
- package/dist/mjs/Editor.d.ts +8 -4
- package/dist/mjs/Editor.mjs +56 -6
- package/dist/mjs/SVGLoader/SVGLoader.mjs +2 -0
- package/dist/mjs/Viewport.d.ts +3 -1
- package/dist/mjs/Viewport.mjs +1 -2
- package/dist/mjs/components/AbstractComponent.d.ts +2 -2
- package/dist/mjs/components/AbstractComponent.mjs +1 -1
- package/dist/mjs/components/builders/ArrowBuilder.d.ts +1 -1
- package/dist/mjs/components/builders/ArrowBuilder.mjs +1 -1
- package/dist/mjs/image/EditorImage.d.ts +30 -7
- package/dist/mjs/image/EditorImage.mjs +30 -7
- package/dist/mjs/rendering/renderers/CanvasRenderer.d.ts +2 -25
- package/dist/mjs/rendering/renderers/CanvasRenderer.mjs +2 -25
- package/dist/mjs/rendering/renderers/SVGRenderer.mjs +2 -2
- package/dist/mjs/toolbar/AbstractToolbar.d.ts +19 -0
- package/dist/mjs/toolbar/AbstractToolbar.mjs +19 -0
- package/dist/mjs/toolbar/EdgeToolbar.d.ts +1 -1
- package/dist/mjs/toolbar/IconProvider.d.ts +5 -1
- package/dist/mjs/toolbar/IconProvider.mjs +112 -146
- package/dist/mjs/toolbar/localization.mjs +2 -2
- package/dist/mjs/toolbar/widgets/BaseWidget.d.ts +1 -1
- package/dist/mjs/toolbar/widgets/BaseWidget.mjs +1 -1
- package/dist/mjs/tools/PanZoom.mjs +1 -1
- package/dist/mjs/tools/Pen.d.ts +13 -0
- package/dist/mjs/tools/Pen.mjs +13 -0
- package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs +1 -1
- package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts +2 -2
- package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.mjs +1 -1
- package/dist/mjs/tools/SoundUITool.mjs +1 -1
- package/dist/mjs/tools/TextTool.d.ts +4 -4
- package/dist/mjs/tools/TextTool.mjs +45 -51
- package/dist/mjs/tools/UndoRedoShortcut.mjs +2 -2
- package/dist/mjs/tools/lib.d.ts +1 -0
- package/dist/mjs/tools/lib.mjs +1 -0
- package/dist/mjs/util/ClipboardHandler.mjs +1 -0
- package/dist/mjs/util/cloneElementWithStyles.mjs +1 -1
- package/dist/mjs/util/createElement.d.ts +62 -0
- package/dist/mjs/util/createElement.mjs +47 -0
- package/dist/mjs/version.mjs +1 -1
- package/package.json +4 -4
- 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
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
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 {
|
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 =
|
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
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
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=
|
177
|
-
<rect x=75 y=75 width=10 height=10 fill=
|
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
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
|
500
|
-
|
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.
|
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.
|
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: '
|
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,
|
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
|
101
|
+
* in the future using `addTo`.
|
102
102
|
*/
|
103
103
|
remove(): void;
|
104
104
|
focus(): 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 (
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
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 (
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
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 (
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
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
|
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;
|
package/dist/cjs/tools/Pen.d.ts
CHANGED
@@ -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;
|
package/dist/cjs/tools/Pen.js
CHANGED
@@ -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 (
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
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 (
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
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 =
|
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:
|
4
|
-
onPasteError(error:
|
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
|
-
|
24
|
+
onCopyError(error) {
|
25
25
|
const dialog = makeErrorDialog(error);
|
26
26
|
const textboxLabel = document.createElement('label');
|
27
27
|
textboxLabel.textContent = editor.localization.copyPasteError__copyRetry;
|