js-draw 1.21.1 → 1.21.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (187) hide show
  1. package/dist/Editor.css +4 -2
  2. package/dist/bundle.js +2 -2
  3. package/dist/bundledStyles.js +1 -1
  4. package/dist/cjs/toolbar/widgets/InsertImageWidget/ImageWrapper.d.ts +1 -1
  5. package/dist/cjs/tools/BaseTool.d.ts +61 -0
  6. package/dist/cjs/tools/BaseTool.js +179 -0
  7. package/dist/cjs/tools/Eraser.d.ts +60 -0
  8. package/dist/cjs/tools/Eraser.js +299 -0
  9. package/dist/cjs/tools/Eraser.test.d.ts +1 -0
  10. package/dist/cjs/tools/FindTool.d.ts +21 -0
  11. package/dist/cjs/tools/FindTool.js +137 -0
  12. package/dist/cjs/tools/FindTool.test.d.ts +1 -0
  13. package/dist/cjs/tools/InputFilter/ContextMenuRecognizer.d.ts +17 -0
  14. package/dist/cjs/tools/InputFilter/ContextMenuRecognizer.js +105 -0
  15. package/dist/cjs/tools/InputFilter/ContextMenuRecognizer.test.d.ts +1 -0
  16. package/dist/cjs/tools/InputFilter/FunctionMapper.d.ts +12 -0
  17. package/dist/cjs/tools/InputFilter/FunctionMapper.js +21 -0
  18. package/dist/cjs/tools/InputFilter/InputMapper.d.ts +23 -0
  19. package/dist/cjs/tools/InputFilter/InputMapper.js +38 -0
  20. package/dist/cjs/tools/InputFilter/InputPipeline.d.ts +15 -0
  21. package/dist/cjs/tools/InputFilter/InputPipeline.js +54 -0
  22. package/dist/cjs/tools/InputFilter/InputPipeline.test.d.ts +1 -0
  23. package/dist/cjs/tools/InputFilter/InputStabilizer.d.ts +29 -0
  24. package/dist/cjs/tools/InputFilter/InputStabilizer.js +181 -0
  25. package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.d.ts +21 -0
  26. package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.js +84 -0
  27. package/dist/cjs/tools/PanZoom.d.ts +125 -0
  28. package/dist/cjs/tools/PanZoom.js +517 -0
  29. package/dist/cjs/tools/PanZoom.test.d.ts +1 -0
  30. package/dist/cjs/tools/PasteHandler.d.ts +23 -0
  31. package/dist/cjs/tools/PasteHandler.js +109 -0
  32. package/dist/cjs/tools/Pen.d.ts +54 -0
  33. package/dist/cjs/tools/Pen.js +335 -0
  34. package/dist/cjs/tools/Pen.test.d.ts +1 -0
  35. package/dist/cjs/tools/PipetteTool.d.ts +28 -0
  36. package/dist/cjs/tools/PipetteTool.js +69 -0
  37. package/dist/cjs/tools/ScrollbarTool.d.ts +18 -0
  38. package/dist/cjs/tools/ScrollbarTool.js +85 -0
  39. package/dist/cjs/tools/SelectionTool/SelectAllShortcutHandler.d.ts +9 -0
  40. package/dist/cjs/tools/SelectionTool/SelectAllShortcutHandler.js +32 -0
  41. package/dist/cjs/tools/SelectionTool/Selection.d.ts +72 -0
  42. package/dist/cjs/tools/SelectionTool/Selection.js +634 -0
  43. package/dist/cjs/tools/SelectionTool/SelectionHandle.d.ts +62 -0
  44. package/dist/cjs/tools/SelectionTool/SelectionHandle.js +141 -0
  45. package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +32 -0
  46. package/dist/cjs/tools/SelectionTool/SelectionMenuShortcut.js +86 -0
  47. package/dist/cjs/tools/SelectionTool/SelectionTool.d.ts +42 -0
  48. package/dist/cjs/tools/SelectionTool/SelectionTool.js +500 -0
  49. package/dist/cjs/tools/SelectionTool/SelectionTool.selecting.test.d.ts +1 -0
  50. package/dist/cjs/tools/SelectionTool/SelectionTool.test.d.ts +1 -0
  51. package/dist/cjs/tools/SelectionTool/ToPointerAutoscroller.d.ts +23 -0
  52. package/dist/cjs/tools/SelectionTool/ToPointerAutoscroller.js +83 -0
  53. package/dist/cjs/tools/SelectionTool/TransformMode.d.ts +42 -0
  54. package/dist/cjs/tools/SelectionTool/TransformMode.js +155 -0
  55. package/dist/cjs/tools/SelectionTool/keybindings.d.ts +15 -0
  56. package/dist/cjs/tools/SelectionTool/keybindings.js +38 -0
  57. package/dist/cjs/tools/SelectionTool/types.d.ts +35 -0
  58. package/dist/cjs/tools/SelectionTool/types.js +14 -0
  59. package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts +6 -0
  60. package/dist/cjs/tools/SelectionTool/util/makeClipboardErrorHandlers.js +50 -0
  61. package/dist/cjs/tools/SelectionTool/util/showSelectionContextMenu.d.ts +5 -0
  62. package/dist/cjs/tools/SelectionTool/util/showSelectionContextMenu.js +43 -0
  63. package/dist/cjs/tools/SoundUITool.d.ts +26 -0
  64. package/dist/cjs/tools/SoundUITool.js +171 -0
  65. package/dist/cjs/tools/TextTool.d.ts +36 -0
  66. package/dist/cjs/tools/TextTool.js +285 -0
  67. package/dist/cjs/tools/TextTool.test.d.ts +1 -0
  68. package/dist/cjs/tools/ToolController.d.ts +73 -0
  69. package/dist/cjs/tools/ToolController.js +304 -0
  70. package/dist/cjs/tools/ToolController.test.d.ts +1 -0
  71. package/dist/cjs/tools/ToolEnabledGroup.d.ts +6 -0
  72. package/dist/cjs/tools/ToolEnabledGroup.js +13 -0
  73. package/dist/cjs/tools/ToolSwitcherShortcut.d.ts +16 -0
  74. package/dist/cjs/tools/ToolSwitcherShortcut.js +40 -0
  75. package/dist/cjs/tools/ToolbarShortcutHandler.d.ts +12 -0
  76. package/dist/cjs/tools/ToolbarShortcutHandler.js +34 -0
  77. package/dist/cjs/tools/UndoRedoShortcut.d.ts +8 -0
  78. package/dist/cjs/tools/UndoRedoShortcut.js +27 -0
  79. package/dist/cjs/tools/UndoRedoShortcut.test.d.ts +1 -0
  80. package/dist/cjs/tools/keybindings.d.ts +16 -0
  81. package/dist/cjs/tools/keybindings.js +58 -0
  82. package/dist/cjs/tools/lib.d.ts +14 -0
  83. package/dist/cjs/tools/lib.js +36 -0
  84. package/dist/cjs/tools/localization.d.ts +43 -0
  85. package/dist/cjs/tools/localization.js +45 -0
  86. package/dist/cjs/tools/util/StationaryPenDetector.d.ts +25 -0
  87. package/dist/cjs/tools/util/StationaryPenDetector.js +107 -0
  88. package/dist/cjs/tools/util/createMenuOverlay.d.ts +10 -0
  89. package/dist/cjs/tools/util/createMenuOverlay.js +126 -0
  90. package/dist/cjs/tools/util/createMenuOverlay.test.d.ts +1 -0
  91. package/dist/cjs/version.js +1 -1
  92. package/dist/mjs/toolbar/widgets/InsertImageWidget/ImageWrapper.d.ts +1 -1
  93. package/dist/mjs/tools/BaseTool.d.ts +61 -0
  94. package/dist/mjs/tools/BaseTool.mjs +177 -0
  95. package/dist/mjs/tools/Eraser.d.ts +60 -0
  96. package/dist/mjs/tools/Eraser.mjs +292 -0
  97. package/dist/mjs/tools/Eraser.test.d.ts +1 -0
  98. package/dist/mjs/tools/FindTool.d.ts +21 -0
  99. package/dist/mjs/tools/FindTool.mjs +131 -0
  100. package/dist/mjs/tools/FindTool.test.d.ts +1 -0
  101. package/dist/mjs/tools/InputFilter/ContextMenuRecognizer.d.ts +17 -0
  102. package/dist/mjs/tools/InputFilter/ContextMenuRecognizer.mjs +76 -0
  103. package/dist/mjs/tools/InputFilter/ContextMenuRecognizer.test.d.ts +1 -0
  104. package/dist/mjs/tools/InputFilter/FunctionMapper.d.ts +12 -0
  105. package/dist/mjs/tools/InputFilter/FunctionMapper.mjs +15 -0
  106. package/dist/mjs/tools/InputFilter/InputMapper.d.ts +23 -0
  107. package/dist/mjs/tools/InputFilter/InputMapper.mjs +36 -0
  108. package/dist/mjs/tools/InputFilter/InputPipeline.d.ts +15 -0
  109. package/dist/mjs/tools/InputFilter/InputPipeline.mjs +49 -0
  110. package/dist/mjs/tools/InputFilter/InputPipeline.test.d.ts +1 -0
  111. package/dist/mjs/tools/InputFilter/InputStabilizer.d.ts +29 -0
  112. package/dist/mjs/tools/InputFilter/InputStabilizer.mjs +175 -0
  113. package/dist/mjs/tools/InputFilter/StrokeKeyboardControl.d.ts +21 -0
  114. package/dist/mjs/tools/InputFilter/StrokeKeyboardControl.mjs +78 -0
  115. package/dist/mjs/tools/PanZoom.d.ts +125 -0
  116. package/dist/mjs/tools/PanZoom.mjs +510 -0
  117. package/dist/mjs/tools/PanZoom.test.d.ts +1 -0
  118. package/dist/mjs/tools/PasteHandler.d.ts +23 -0
  119. package/dist/mjs/tools/PasteHandler.mjs +103 -0
  120. package/dist/mjs/tools/Pen.d.ts +54 -0
  121. package/dist/mjs/tools/Pen.mjs +306 -0
  122. package/dist/mjs/tools/Pen.test.d.ts +1 -0
  123. package/dist/mjs/tools/PipetteTool.d.ts +28 -0
  124. package/dist/mjs/tools/PipetteTool.mjs +63 -0
  125. package/dist/mjs/tools/ScrollbarTool.d.ts +18 -0
  126. package/dist/mjs/tools/ScrollbarTool.mjs +79 -0
  127. package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.d.ts +9 -0
  128. package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.mjs +26 -0
  129. package/dist/mjs/tools/SelectionTool/Selection.d.ts +72 -0
  130. package/dist/mjs/tools/SelectionTool/Selection.mjs +606 -0
  131. package/dist/mjs/tools/SelectionTool/SelectionHandle.d.ts +62 -0
  132. package/dist/mjs/tools/SelectionTool/SelectionHandle.mjs +137 -0
  133. package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.d.ts +32 -0
  134. package/dist/mjs/tools/SelectionTool/SelectionMenuShortcut.mjs +83 -0
  135. package/dist/mjs/tools/SelectionTool/SelectionTool.d.ts +42 -0
  136. package/dist/mjs/tools/SelectionTool/SelectionTool.mjs +493 -0
  137. package/dist/mjs/tools/SelectionTool/SelectionTool.selecting.test.d.ts +1 -0
  138. package/dist/mjs/tools/SelectionTool/SelectionTool.test.d.ts +1 -0
  139. package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.d.ts +23 -0
  140. package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.mjs +77 -0
  141. package/dist/mjs/tools/SelectionTool/TransformMode.d.ts +42 -0
  142. package/dist/mjs/tools/SelectionTool/TransformMode.mjs +146 -0
  143. package/dist/mjs/tools/SelectionTool/keybindings.d.ts +15 -0
  144. package/dist/mjs/tools/SelectionTool/keybindings.mjs +32 -0
  145. package/dist/mjs/tools/SelectionTool/types.d.ts +35 -0
  146. package/dist/mjs/tools/SelectionTool/types.mjs +11 -0
  147. package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.d.ts +6 -0
  148. package/dist/mjs/tools/SelectionTool/util/makeClipboardErrorHandlers.mjs +45 -0
  149. package/dist/mjs/tools/SelectionTool/util/showSelectionContextMenu.d.ts +5 -0
  150. package/dist/mjs/tools/SelectionTool/util/showSelectionContextMenu.mjs +38 -0
  151. package/dist/mjs/tools/SoundUITool.d.ts +26 -0
  152. package/dist/mjs/tools/SoundUITool.mjs +165 -0
  153. package/dist/mjs/tools/TextTool.d.ts +36 -0
  154. package/dist/mjs/tools/TextTool.mjs +279 -0
  155. package/dist/mjs/tools/TextTool.test.d.ts +1 -0
  156. package/dist/mjs/tools/ToolController.d.ts +73 -0
  157. package/dist/mjs/tools/ToolController.mjs +275 -0
  158. package/dist/mjs/tools/ToolController.test.d.ts +1 -0
  159. package/dist/mjs/tools/ToolEnabledGroup.d.ts +6 -0
  160. package/dist/mjs/tools/ToolEnabledGroup.mjs +10 -0
  161. package/dist/mjs/tools/ToolSwitcherShortcut.d.ts +16 -0
  162. package/dist/mjs/tools/ToolSwitcherShortcut.mjs +34 -0
  163. package/dist/mjs/tools/ToolbarShortcutHandler.d.ts +12 -0
  164. package/dist/mjs/tools/ToolbarShortcutHandler.mjs +28 -0
  165. package/dist/mjs/tools/UndoRedoShortcut.d.ts +8 -0
  166. package/dist/mjs/tools/UndoRedoShortcut.mjs +21 -0
  167. package/dist/mjs/tools/UndoRedoShortcut.test.d.ts +1 -0
  168. package/dist/mjs/tools/keybindings.d.ts +16 -0
  169. package/dist/mjs/tools/keybindings.mjs +38 -0
  170. package/dist/mjs/tools/lib.d.ts +14 -0
  171. package/dist/mjs/tools/lib.mjs +14 -0
  172. package/dist/mjs/tools/localization.d.ts +43 -0
  173. package/dist/mjs/tools/localization.mjs +42 -0
  174. package/dist/mjs/tools/util/StationaryPenDetector.d.ts +25 -0
  175. package/dist/mjs/tools/util/StationaryPenDetector.mjs +103 -0
  176. package/dist/mjs/tools/util/createMenuOverlay.d.ts +10 -0
  177. package/dist/mjs/tools/util/createMenuOverlay.mjs +121 -0
  178. package/dist/mjs/tools/util/createMenuOverlay.test.d.ts +1 -0
  179. package/dist/mjs/version.mjs +1 -1
  180. package/package.json +4 -4
  181. package/src/tools/FindTool.css +7 -0
  182. package/src/tools/ScrollbarTool.scss +57 -0
  183. package/src/tools/SelectionTool/SelectionTool.scss +165 -0
  184. package/src/tools/SelectionTool/util/makeClipboardErrorHandlers.scss +15 -0
  185. package/src/tools/SoundUITool.scss +22 -0
  186. package/src/tools/tools.scss +6 -0
  187. package/src/tools/util/createMenuOverlay.scss +67 -0
@@ -0,0 +1,54 @@
1
+ import { Color4 } from '@js-draw/math';
2
+ import Editor from '../Editor';
3
+ import Pointer from '../Pointer';
4
+ import { StrokeDataPoint } from '../types';
5
+ import { KeyPressEvent, PointerEvt } from '../inputEvents';
6
+ import BaseTool from './BaseTool';
7
+ import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
8
+ import { MutableReactiveValue } from '../util/ReactiveValue';
9
+ export interface PenStyle {
10
+ readonly color: Color4;
11
+ readonly thickness: number;
12
+ readonly factory: ComponentBuilderFactory;
13
+ }
14
+ export default class Pen extends BaseTool {
15
+ private editor;
16
+ protected builder: ComponentBuilder | null;
17
+ private lastPoint;
18
+ private startPoint;
19
+ private currentDeviceType;
20
+ private currentPointerId;
21
+ private styleValue;
22
+ private style;
23
+ private shapeAutocompletionEnabled;
24
+ private autocorrectedShape;
25
+ private lastAutocorrectedShape;
26
+ private removedAutocorrectedShapeTime;
27
+ private stationaryDetector;
28
+ constructor(editor: Editor, description: string, style: Partial<PenStyle>);
29
+ private getPressureMultiplier;
30
+ protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
31
+ protected previewStroke(): void;
32
+ protected addPointToStroke(point: StrokeDataPoint): void;
33
+ onPointerDown(event: PointerEvt): boolean;
34
+ private eventCanCancelStroke;
35
+ eventCanBeDeliveredToNonActiveTool(event: PointerEvt): boolean;
36
+ onPointerMove({ current }: PointerEvt): void;
37
+ onPointerUp({ current }: PointerEvt): boolean;
38
+ onGestureCancel(): void;
39
+ private removedAutocorrectedShapeRecently;
40
+ private autocorrectShape;
41
+ private finalizeStroke;
42
+ private noteUpdated;
43
+ setColor(color: Color4): void;
44
+ setThickness(thickness: number): void;
45
+ setStrokeFactory(factory: ComponentBuilderFactory): void;
46
+ setHasStabilization(hasStabilization: boolean): void;
47
+ setStrokeAutocorrectEnabled(enabled: boolean): void;
48
+ getStrokeAutocorrectionEnabled(): boolean;
49
+ getThickness(): number;
50
+ getColor(): Color4;
51
+ getStrokeFactory(): ComponentBuilderFactory;
52
+ getStyleValue(): MutableReactiveValue<PenStyle>;
53
+ onKeyPress(event: KeyPressEvent): boolean;
54
+ }
@@ -0,0 +1,335 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
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
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ const math_1 = require("@js-draw/math");
30
+ const EditorImage_1 = __importDefault(require("../image/EditorImage"));
31
+ const Pointer_1 = require("../Pointer");
32
+ const FreehandLineBuilder_1 = require("../components/builders/FreehandLineBuilder");
33
+ const types_1 = require("../types");
34
+ const BaseTool_1 = __importDefault(require("./BaseTool"));
35
+ const keybindings_1 = require("./keybindings");
36
+ const keybindings_2 = require("./keybindings");
37
+ const InputStabilizer_1 = __importDefault(require("./InputFilter/InputStabilizer"));
38
+ const ReactiveValue_1 = require("../util/ReactiveValue");
39
+ const StationaryPenDetector_1 = __importStar(require("./util/StationaryPenDetector"));
40
+ class Pen extends BaseTool_1.default {
41
+ constructor(editor, description, style) {
42
+ super(editor.notifier, description);
43
+ this.editor = editor;
44
+ this.builder = null;
45
+ this.lastPoint = null;
46
+ this.startPoint = null;
47
+ this.currentDeviceType = null;
48
+ this.currentPointerId = null;
49
+ this.shapeAutocompletionEnabled = false;
50
+ this.autocorrectedShape = null;
51
+ this.lastAutocorrectedShape = null;
52
+ this.removedAutocorrectedShapeTime = 0;
53
+ this.stationaryDetector = null;
54
+ this.styleValue = ReactiveValue_1.ReactiveValue.fromInitialValue({
55
+ factory: FreehandLineBuilder_1.makeFreehandLineBuilder,
56
+ color: math_1.Color4.blue,
57
+ thickness: 4,
58
+ ...style,
59
+ });
60
+ this.styleValue.onUpdateAndNow(newValue => {
61
+ this.style = newValue;
62
+ this.noteUpdated();
63
+ });
64
+ }
65
+ getPressureMultiplier() {
66
+ const thickness = this.style.thickness;
67
+ return 1 / this.editor.viewport.getScaleFactor() * thickness;
68
+ }
69
+ // Converts a `pointer` to a `StrokeDataPoint`.
70
+ toStrokePoint(pointer) {
71
+ const minPressure = 0.3;
72
+ let pressure = Math.max(pointer.pressure ?? 1.0, minPressure);
73
+ if (!isFinite(pressure)) {
74
+ console.warn('Non-finite pressure!', pointer);
75
+ pressure = minPressure;
76
+ }
77
+ console.assert(isFinite(pointer.canvasPos.length()), 'Non-finite canvas position!');
78
+ console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
79
+ console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
80
+ const pos = pointer.canvasPos;
81
+ return {
82
+ pos,
83
+ width: pressure * this.getPressureMultiplier(),
84
+ color: this.style.color,
85
+ time: pointer.timeStamp,
86
+ };
87
+ }
88
+ // Displays the stroke that is currently being built with the display's `wetInkRenderer`.
89
+ previewStroke() {
90
+ this.editor.clearWetInk();
91
+ const wetInkRenderer = this.editor.display.getWetInkRenderer();
92
+ if (this.autocorrectedShape) {
93
+ const visibleRect = this.editor.viewport.visibleRect;
94
+ this.autocorrectedShape.render(wetInkRenderer, visibleRect);
95
+ }
96
+ else {
97
+ this.builder?.preview(wetInkRenderer);
98
+ }
99
+ }
100
+ // Throws if no stroke builder exists.
101
+ addPointToStroke(point) {
102
+ if (!this.builder) {
103
+ throw new Error('No stroke is currently being generated.');
104
+ }
105
+ this.builder.addPoint(point);
106
+ this.lastPoint = point;
107
+ this.previewStroke();
108
+ }
109
+ onPointerDown(event) {
110
+ // Avoid canceling an existing stroke
111
+ if (this.builder && !this.eventCanCancelStroke(event)) {
112
+ return true;
113
+ }
114
+ const { current, allPointers } = event;
115
+ const isEraser = current.device === Pointer_1.PointerDevice.Eraser;
116
+ const isPen = current.device === Pointer_1.PointerDevice.Pen;
117
+ // Always start strokes if the current device is a pen. This is useful in the case
118
+ // where an accidental touch gesture from a user's hand is ongoing. This gesture
119
+ // should not prevent the user from drawing.
120
+ if ((allPointers.length === 1 && !isEraser) || isPen) {
121
+ this.startPoint = this.toStrokePoint(current);
122
+ this.builder = this.style.factory(this.startPoint, this.editor.viewport);
123
+ this.currentDeviceType = current.device;
124
+ this.currentPointerId = current.id;
125
+ if (this.shapeAutocompletionEnabled) {
126
+ this.stationaryDetector = new StationaryPenDetector_1.default(current, StationaryPenDetector_1.defaultStationaryDetectionConfig, pointer => this.autocorrectShape(pointer));
127
+ }
128
+ else {
129
+ this.stationaryDetector = null;
130
+ }
131
+ this.lastAutocorrectedShape = null;
132
+ this.removedAutocorrectedShapeTime = 0;
133
+ return true;
134
+ }
135
+ return false;
136
+ }
137
+ eventCanCancelStroke(event) {
138
+ // If there has been a delay since the last input event,
139
+ // it's always okay to cancel
140
+ const lastInputTime = this.lastPoint?.time ?? 0;
141
+ if (event.current.timeStamp - lastInputTime > 1000) {
142
+ return true;
143
+ }
144
+ const isPenStroke = this.currentDeviceType === Pointer_1.PointerDevice.Pen;
145
+ const isTouchEvent = event.current.device === Pointer_1.PointerDevice.Touch;
146
+ // Don't allow pen strokes to be cancelled by touch events.
147
+ if (isPenStroke && isTouchEvent) {
148
+ return false;
149
+ }
150
+ return true;
151
+ }
152
+ eventCanBeDeliveredToNonActiveTool(event) {
153
+ return this.eventCanCancelStroke(event);
154
+ }
155
+ onPointerMove({ current }) {
156
+ if (!this.builder)
157
+ return;
158
+ if (current.device !== this.currentDeviceType)
159
+ return;
160
+ if (current.id !== this.currentPointerId)
161
+ return;
162
+ const isStationary = this.stationaryDetector?.onPointerMove(current);
163
+ if (!isStationary) {
164
+ this.addPointToStroke(this.toStrokePoint(current));
165
+ if (this.autocorrectedShape) {
166
+ this.removedAutocorrectedShapeTime = performance.now();
167
+ this.autocorrectedShape = null;
168
+ this.editor.announceForAccessibility(this.editor.localization.autocorrectionCanceled);
169
+ }
170
+ }
171
+ }
172
+ onPointerUp({ current }) {
173
+ if (!this.builder)
174
+ return false;
175
+ if (current.id !== this.currentPointerId) {
176
+ // this.builder still exists, so we're handling events from another
177
+ // device type.
178
+ return true;
179
+ }
180
+ this.stationaryDetector?.onPointerUp(current);
181
+ // onPointerUp events can have zero pressure. Use the last pressure instead.
182
+ const currentPoint = this.toStrokePoint(current);
183
+ const strokePoint = {
184
+ ...currentPoint,
185
+ width: this.lastPoint?.width ?? currentPoint.width,
186
+ };
187
+ this.addPointToStroke(strokePoint);
188
+ this.finalizeStroke();
189
+ return false;
190
+ }
191
+ onGestureCancel() {
192
+ this.builder = null;
193
+ this.editor.clearWetInk();
194
+ this.stationaryDetector?.destroy();
195
+ this.stationaryDetector = null;
196
+ }
197
+ removedAutocorrectedShapeRecently() {
198
+ return this.removedAutocorrectedShapeTime > performance.now() - 320;
199
+ }
200
+ async autocorrectShape(_lastPointer) {
201
+ if (!this.builder || !this.builder.autocorrectShape)
202
+ return;
203
+ if (!this.shapeAutocompletionEnabled)
204
+ return;
205
+ // If already corrected, do nothing
206
+ if (this.autocorrectedShape)
207
+ return;
208
+ // Activate stroke fitting
209
+ const correctedShape = await this.builder.autocorrectShape();
210
+ if (!this.builder || !correctedShape) {
211
+ return;
212
+ }
213
+ // Don't complete to empty shapes.
214
+ const bboxArea = correctedShape.getBBox().area;
215
+ if (bboxArea === 0 || !isFinite(bboxArea)) {
216
+ return;
217
+ }
218
+ const shapeDescription = correctedShape.description(this.editor.localization);
219
+ this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(shapeDescription));
220
+ this.autocorrectedShape = correctedShape;
221
+ this.lastAutocorrectedShape = correctedShape;
222
+ this.previewStroke();
223
+ }
224
+ finalizeStroke() {
225
+ if (this.builder) {
226
+ // If autocorrectedShape was cleared recently enough, it was
227
+ // probably by mistake. Reset it.
228
+ if (this.lastAutocorrectedShape && this.removedAutocorrectedShapeRecently()) {
229
+ this.autocorrectedShape = this.lastAutocorrectedShape;
230
+ }
231
+ const stroke = this.autocorrectedShape ?? this.builder.build();
232
+ this.previewStroke();
233
+ if (stroke.getBBox().area > 0) {
234
+ if (stroke === this.autocorrectedShape) {
235
+ this.editor.announceForAccessibility(this.editor.localization.autocorrectedTo(stroke.description(this.editor.localization)));
236
+ }
237
+ const canFlatten = true;
238
+ const action = EditorImage_1.default.addElement(stroke, canFlatten);
239
+ this.editor.dispatch(action);
240
+ }
241
+ else {
242
+ console.warn('Pen: Not adding empty stroke', stroke, 'to the canvas.');
243
+ }
244
+ }
245
+ this.builder = null;
246
+ this.lastPoint = null;
247
+ this.autocorrectedShape = null;
248
+ this.lastAutocorrectedShape = null;
249
+ this.editor.clearWetInk();
250
+ this.stationaryDetector?.destroy();
251
+ this.stationaryDetector = null;
252
+ }
253
+ noteUpdated() {
254
+ this.editor.notifier.dispatch(types_1.EditorEventType.ToolUpdated, {
255
+ kind: types_1.EditorEventType.ToolUpdated,
256
+ tool: this,
257
+ });
258
+ }
259
+ setColor(color) {
260
+ if (color.toHexString() !== this.style.color.toHexString()) {
261
+ this.styleValue.set({
262
+ ...this.style,
263
+ color,
264
+ });
265
+ }
266
+ }
267
+ setThickness(thickness) {
268
+ if (thickness !== this.style.thickness) {
269
+ this.styleValue.set({
270
+ ...this.style,
271
+ thickness,
272
+ });
273
+ }
274
+ }
275
+ setStrokeFactory(factory) {
276
+ if (factory !== this.style.factory) {
277
+ this.styleValue.set({
278
+ ...this.style,
279
+ factory,
280
+ });
281
+ }
282
+ }
283
+ setHasStabilization(hasStabilization) {
284
+ const hasInputMapper = !!this.getInputMapper();
285
+ // TODO: Currently, this assumes that there is no other input mapper.
286
+ if (hasStabilization === hasInputMapper) {
287
+ return;
288
+ }
289
+ if (hasInputMapper) {
290
+ this.setInputMapper(null);
291
+ }
292
+ else {
293
+ this.setInputMapper(new InputStabilizer_1.default(this.editor.viewport));
294
+ }
295
+ this.noteUpdated();
296
+ }
297
+ setStrokeAutocorrectEnabled(enabled) {
298
+ if (enabled !== this.shapeAutocompletionEnabled) {
299
+ this.shapeAutocompletionEnabled = enabled;
300
+ this.noteUpdated();
301
+ }
302
+ }
303
+ getStrokeAutocorrectionEnabled() {
304
+ return this.shapeAutocompletionEnabled;
305
+ }
306
+ getThickness() { return this.style.thickness; }
307
+ getColor() { return this.style.color; }
308
+ getStrokeFactory() { return this.style.factory; }
309
+ getStyleValue() { return this.styleValue; }
310
+ onKeyPress(event) {
311
+ const shortcuts = this.editor.shortcuts;
312
+ // Ctrl+Z: End the stroke so that it can be undone/redone.
313
+ const isCtrlZ = shortcuts.matchesShortcut(keybindings_1.undoKeyboardShortcutId, event);
314
+ if (this.builder && isCtrlZ) {
315
+ this.finalizeStroke();
316
+ // Return false: Allow other listeners to handle the event (e.g.
317
+ // undo/redo).
318
+ return false;
319
+ }
320
+ let newThickness;
321
+ if (shortcuts.matchesShortcut(keybindings_2.decreaseSizeKeyboardShortcutId, event)) {
322
+ newThickness = this.getThickness() * 2 / 3;
323
+ }
324
+ else if (shortcuts.matchesShortcut(keybindings_2.increaseSizeKeyboardShortcutId, event)) {
325
+ newThickness = this.getThickness() * 3 / 2;
326
+ }
327
+ if (newThickness !== undefined) {
328
+ newThickness = Math.min(Math.max(1, newThickness), 256);
329
+ this.setThickness(newThickness);
330
+ return true;
331
+ }
332
+ return false;
333
+ }
334
+ }
335
+ exports.default = Pen;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,28 @@
1
+ import { Color4 } from '@js-draw/math';
2
+ import Editor from '../Editor';
3
+ import { PointerEvt } from '../inputEvents';
4
+ import BaseTool from './BaseTool';
5
+ type ColorListener = (color: Color4 | null) => void;
6
+ /**
7
+ * A tool used internally to pick colors from the canvas.
8
+ *
9
+ * When color selection is in progress, the `pipette--color-selection-in-progress` class
10
+ * is added to the root element. This can be used by themes.
11
+ *
12
+ * @internal
13
+ */
14
+ export default class PipetteTool extends BaseTool {
15
+ private editor;
16
+ private colorPreviewListener;
17
+ private colorSelectListener;
18
+ constructor(editor: Editor, description: string);
19
+ canReceiveInputInReadOnlyEditor(): boolean;
20
+ private updateSelectingStatus;
21
+ setColorListener(colorPreviewListener: ColorListener, colorSelectListener: ColorListener): void;
22
+ clearColorListener(): void;
23
+ onPointerDown({ current, allPointers }: PointerEvt): boolean;
24
+ onPointerMove({ current }: PointerEvt): void;
25
+ onPointerUp({ current }: PointerEvt): void;
26
+ onGestureCancel(): void;
27
+ }
28
+ export {};
@@ -0,0 +1,69 @@
1
+ "use strict";
2
+ // @internal @packageDocumentation
3
+ var __importDefault = (this && this.__importDefault) || function (mod) {
4
+ return (mod && mod.__esModule) ? mod : { "default": mod };
5
+ };
6
+ Object.defineProperty(exports, "__esModule", { value: true });
7
+ const BaseTool_1 = __importDefault(require("./BaseTool"));
8
+ /**
9
+ * A tool used internally to pick colors from the canvas.
10
+ *
11
+ * When color selection is in progress, the `pipette--color-selection-in-progress` class
12
+ * is added to the root element. This can be used by themes.
13
+ *
14
+ * @internal
15
+ */
16
+ class PipetteTool extends BaseTool_1.default {
17
+ constructor(editor, description) {
18
+ super(editor.notifier, description);
19
+ this.editor = editor;
20
+ this.colorPreviewListener = null;
21
+ this.colorSelectListener = null;
22
+ this.enabledValue().onUpdateAndNow(() => {
23
+ this.updateSelectingStatus();
24
+ });
25
+ }
26
+ canReceiveInputInReadOnlyEditor() {
27
+ return true;
28
+ }
29
+ // Ensures that the root editor element correctly reflects whether color selection
30
+ // is in progress.
31
+ updateSelectingStatus() {
32
+ const className = 'pipette--color-selection-in-progress';
33
+ if (this.isEnabled() && this.colorSelectListener && this.colorPreviewListener) {
34
+ this.editor.getRootElement().classList.add(className);
35
+ }
36
+ else {
37
+ this.editor.getRootElement().classList.remove(className);
38
+ }
39
+ }
40
+ setColorListener(colorPreviewListener,
41
+ // Called when the gesture ends -- when the user has selected a color.
42
+ colorSelectListener) {
43
+ this.colorPreviewListener = colorPreviewListener;
44
+ this.colorSelectListener = colorSelectListener;
45
+ this.updateSelectingStatus();
46
+ }
47
+ clearColorListener() {
48
+ this.colorPreviewListener = null;
49
+ this.colorSelectListener = null;
50
+ this.updateSelectingStatus();
51
+ }
52
+ onPointerDown({ current, allPointers }) {
53
+ if (this.colorPreviewListener && allPointers.length === 1) {
54
+ this.colorPreviewListener(this.editor.display.getColorAt(current.screenPos));
55
+ return true;
56
+ }
57
+ return false;
58
+ }
59
+ onPointerMove({ current }) {
60
+ this.colorPreviewListener?.(this.editor.display.getColorAt(current.screenPos));
61
+ }
62
+ onPointerUp({ current }) {
63
+ this.colorSelectListener?.(this.editor.display.getColorAt(current.screenPos));
64
+ }
65
+ onGestureCancel() {
66
+ this.colorSelectListener?.(null);
67
+ }
68
+ }
69
+ exports.default = PipetteTool;
@@ -0,0 +1,18 @@
1
+ import Editor from '../Editor';
2
+ import BaseTool from './BaseTool';
3
+ /**
4
+ * This tool, when enabled, renders scrollbars reflecting the current position
5
+ * of the view relative to the import/export area of the image.
6
+ *
7
+ * **Note**: These scrollbars are currently not draggable. This may change in
8
+ * a future release.
9
+ */
10
+ export default class ScrollbarTool extends BaseTool {
11
+ private editor;
12
+ private scrollbarOverlay;
13
+ private verticalScrollbar;
14
+ private horizontalScrollbar;
15
+ constructor(editor: Editor);
16
+ private fadeOutTimeout;
17
+ private updateScrollbars;
18
+ }
@@ -0,0 +1,85 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const math_1 = require("@js-draw/math");
7
+ const types_1 = require("../types");
8
+ const BaseTool_1 = __importDefault(require("./BaseTool"));
9
+ /**
10
+ * This tool, when enabled, renders scrollbars reflecting the current position
11
+ * of the view relative to the import/export area of the image.
12
+ *
13
+ * **Note**: These scrollbars are currently not draggable. This may change in
14
+ * a future release.
15
+ */
16
+ class ScrollbarTool extends BaseTool_1.default {
17
+ constructor(editor) {
18
+ super(editor.notifier, 'scrollbar');
19
+ this.editor = editor;
20
+ this.fadeOutTimeout = null;
21
+ this.scrollbarOverlay = document.createElement('div');
22
+ this.scrollbarOverlay.classList.add('ScrollbarTool-overlay');
23
+ this.verticalScrollbar = document.createElement('div');
24
+ this.verticalScrollbar.classList.add('vertical-scrollbar');
25
+ this.horizontalScrollbar = document.createElement('div');
26
+ this.horizontalScrollbar.classList.add('horizontal-scrollbar');
27
+ this.scrollbarOverlay.replaceChildren(this.verticalScrollbar, this.horizontalScrollbar);
28
+ let overlay = null;
29
+ let viewportListener = null;
30
+ this.enabledValue().onUpdateAndNow(enabled => {
31
+ overlay?.remove();
32
+ viewportListener?.remove();
33
+ viewportListener = null;
34
+ overlay = null;
35
+ if (enabled) {
36
+ viewportListener = editor.notifier.on(types_1.EditorEventType.ViewportChanged, _event => {
37
+ this.updateScrollbars();
38
+ });
39
+ this.updateScrollbars();
40
+ overlay = editor.createHTMLOverlay(this.scrollbarOverlay);
41
+ }
42
+ });
43
+ }
44
+ updateScrollbars() {
45
+ const viewport = this.editor.viewport;
46
+ const screenSize = viewport.getScreenRectSize();
47
+ const screenRect = new math_1.Rect2(0, 0, screenSize.x, screenSize.y);
48
+ const imageRect = this.editor.getImportExportRect()
49
+ // The scrollbars are positioned in screen coordinates, so the exportRect also needs
50
+ // to be in screen coordinates
51
+ .transformedBoundingBox(viewport.canvasToScreenTransform)
52
+ // If the screenRect is outside of the exportRect, expand the image rectangle
53
+ .union(screenRect);
54
+ const scrollbarWidth = screenRect.width / imageRect.width * screenSize.x;
55
+ const scrollbarHeight = screenRect.height / imageRect.height * screenSize.y;
56
+ const scrollbarX = (screenRect.x - imageRect.x) / imageRect.width * (screenSize.x);
57
+ const scrollbarY = (screenRect.y - imageRect.y) / imageRect.height * (screenSize.y);
58
+ this.horizontalScrollbar.style.width = `${scrollbarWidth}px`;
59
+ this.verticalScrollbar.style.height = `${scrollbarHeight}px`;
60
+ this.horizontalScrollbar.style.marginLeft = `${scrollbarX}px`;
61
+ this.verticalScrollbar.style.marginTop = `${scrollbarY}px`;
62
+ // Style the scrollbars differently when there's no scroll (all content visible)
63
+ const handleNoScrollStyling = (scrollbar, size, fillSize) => {
64
+ const fillsWindowClass = 'represents-no-scroll';
65
+ if (Math.abs(size - fillSize) < 1e-8) {
66
+ scrollbar.classList.add(fillsWindowClass);
67
+ }
68
+ else {
69
+ scrollbar.classList.remove(fillsWindowClass);
70
+ }
71
+ };
72
+ handleNoScrollStyling(this.horizontalScrollbar, scrollbarWidth, screenSize.x);
73
+ handleNoScrollStyling(this.verticalScrollbar, scrollbarHeight, screenSize.y);
74
+ // Fade out after a delay.
75
+ if (this.fadeOutTimeout !== null) {
76
+ clearTimeout(this.fadeOutTimeout);
77
+ }
78
+ const fadeOutDelay = 3000;
79
+ this.fadeOutTimeout = setTimeout(() => {
80
+ this.scrollbarOverlay.classList.remove('just-updated');
81
+ }, fadeOutDelay);
82
+ this.scrollbarOverlay.classList.add('just-updated');
83
+ }
84
+ }
85
+ exports.default = ScrollbarTool;
@@ -0,0 +1,9 @@
1
+ import Editor from '../../Editor';
2
+ import { KeyPressEvent } from '../../inputEvents';
3
+ import BaseTool from '../BaseTool';
4
+ export default class SelectAllShortcutHandler extends BaseTool {
5
+ private editor;
6
+ constructor(editor: Editor);
7
+ canReceiveInputInReadOnlyEditor(): boolean;
8
+ onKeyPress(event: KeyPressEvent): boolean;
9
+ }
@@ -0,0 +1,32 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const BaseTool_1 = __importDefault(require("../BaseTool"));
7
+ const keybindings_1 = require("../keybindings");
8
+ const SelectionTool_1 = __importDefault(require("./SelectionTool"));
9
+ // Handles ctrl+a: Select all
10
+ class SelectAllShortcutHandler extends BaseTool_1.default {
11
+ constructor(editor) {
12
+ super(editor.notifier, editor.localization.selectAllTool);
13
+ this.editor = editor;
14
+ }
15
+ canReceiveInputInReadOnlyEditor() {
16
+ return true;
17
+ }
18
+ // @internal
19
+ onKeyPress(event) {
20
+ if (this.editor.shortcuts.matchesShortcut(keybindings_1.selectAllKeyboardShortcut, event)) {
21
+ const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool_1.default);
22
+ if (selectionTools.length > 0) {
23
+ const selectionTool = selectionTools[0];
24
+ selectionTool.setEnabled(true);
25
+ selectionTool.setSelection(this.editor.image.getAllElements());
26
+ return true;
27
+ }
28
+ }
29
+ return false;
30
+ }
31
+ }
32
+ exports.default = SelectAllShortcutHandler;