js-draw 1.20.3 → 1.21.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (243) hide show
  1. package/LICENSE +1 -1
  2. package/dist/Editor.css +134 -26
  3. package/dist/bundle.js +2 -2
  4. package/dist/bundledStyles.js +1 -1
  5. package/dist/cjs/Editor.d.ts +27 -6
  6. package/dist/cjs/Editor.js +30 -8
  7. package/dist/cjs/SVGLoader/SVGLoader.js +2 -2
  8. package/dist/cjs/Viewport.d.ts +2 -2
  9. package/dist/cjs/commands/Command.d.ts +5 -0
  10. package/dist/cjs/commands/Command.js +5 -0
  11. package/dist/cjs/commands/SerializableCommand.d.ts +7 -0
  12. package/dist/cjs/commands/SerializableCommand.js +9 -0
  13. package/dist/cjs/dialogs/makeAboutDialog.d.ts +1 -1
  14. package/dist/cjs/dialogs/makeAboutDialog.js +10 -25
  15. package/dist/cjs/dialogs/makeMessageDialog.d.ts +11 -0
  16. package/dist/cjs/dialogs/makeMessageDialog.js +56 -0
  17. package/dist/cjs/image/EditorImage.d.ts +15 -1
  18. package/dist/cjs/image/EditorImage.js +15 -5
  19. package/dist/cjs/inputEvents.d.ts +10 -2
  20. package/dist/cjs/inputEvents.js +1 -0
  21. package/dist/cjs/localizations/es.js +3 -0
  22. package/dist/cjs/rendering/Display.d.ts +1 -0
  23. package/dist/cjs/rendering/Display.js +1 -0
  24. package/dist/cjs/rendering/TextRenderingStyle.d.ts +7 -6
  25. package/dist/cjs/rendering/TextRenderingStyle.js +1 -0
  26. package/dist/cjs/rendering/renderers/CanvasRenderer.d.ts +12 -3
  27. package/dist/cjs/rendering/renderers/CanvasRenderer.js +15 -2
  28. package/dist/cjs/rendering/renderers/DummyRenderer.d.ts +1 -1
  29. package/dist/cjs/testing/firstElementAncestorOfNode.d.ts +1 -1
  30. package/dist/cjs/testing/firstElementAncestorOfNode.js +1 -1
  31. package/dist/cjs/testing/sendPenEvent.d.ts +2 -2
  32. package/dist/cjs/testing/sendTouchEvent.d.ts +2 -2
  33. package/dist/cjs/toolbar/AbstractToolbar.d.ts +6 -1
  34. package/dist/cjs/toolbar/AbstractToolbar.js +6 -1
  35. package/dist/cjs/toolbar/IconProvider.d.ts +1 -1
  36. package/dist/cjs/toolbar/IconProvider.js +6 -1
  37. package/dist/cjs/toolbar/widgets/BaseWidget.d.ts +8 -0
  38. package/dist/cjs/toolbar/widgets/BaseWidget.js +8 -0
  39. package/dist/cjs/toolbar/widgets/HandToolWidget.d.ts +1 -0
  40. package/dist/cjs/toolbar/widgets/HandToolWidget.js +1 -0
  41. package/dist/cjs/toolbar/widgets/PenToolWidget.d.ts +6 -0
  42. package/dist/cjs/toolbar/widgets/PenToolWidget.js +5 -0
  43. package/dist/cjs/types.d.ts +5 -0
  44. package/dist/cjs/types.js +1 -0
  45. package/dist/cjs/util/ClipboardHandler.d.ts +9 -1
  46. package/dist/cjs/util/ClipboardHandler.js +82 -24
  47. package/dist/cjs/version.js +1 -1
  48. package/dist/mjs/Editor.d.ts +27 -6
  49. package/dist/mjs/Editor.mjs +31 -9
  50. package/dist/mjs/SVGLoader/SVGLoader.mjs +2 -2
  51. package/dist/mjs/Viewport.d.ts +2 -2
  52. package/dist/mjs/commands/Command.d.ts +5 -0
  53. package/dist/mjs/commands/Command.mjs +5 -0
  54. package/dist/mjs/commands/SerializableCommand.d.ts +7 -0
  55. package/dist/mjs/commands/SerializableCommand.mjs +9 -0
  56. package/dist/mjs/dialogs/makeAboutDialog.d.ts +1 -1
  57. package/dist/mjs/dialogs/makeAboutDialog.mjs +7 -25
  58. package/dist/mjs/dialogs/makeMessageDialog.d.ts +11 -0
  59. package/dist/mjs/dialogs/makeMessageDialog.mjs +51 -0
  60. package/dist/mjs/image/EditorImage.d.ts +15 -1
  61. package/dist/mjs/image/EditorImage.mjs +15 -5
  62. package/dist/mjs/inputEvents.d.ts +10 -2
  63. package/dist/mjs/inputEvents.mjs +1 -0
  64. package/dist/mjs/localizations/es.mjs +3 -0
  65. package/dist/mjs/rendering/Display.d.ts +1 -0
  66. package/dist/mjs/rendering/Display.mjs +1 -0
  67. package/dist/mjs/rendering/TextRenderingStyle.d.ts +7 -6
  68. package/dist/mjs/rendering/TextRenderingStyle.mjs +1 -0
  69. package/dist/mjs/rendering/renderers/CanvasRenderer.d.ts +12 -3
  70. package/dist/mjs/rendering/renderers/CanvasRenderer.mjs +15 -2
  71. package/dist/mjs/rendering/renderers/DummyRenderer.d.ts +1 -1
  72. package/dist/mjs/testing/firstElementAncestorOfNode.d.ts +1 -1
  73. package/dist/mjs/testing/firstElementAncestorOfNode.mjs +1 -1
  74. package/dist/mjs/testing/sendPenEvent.d.ts +2 -2
  75. package/dist/mjs/testing/sendTouchEvent.d.ts +2 -2
  76. package/dist/mjs/toolbar/AbstractToolbar.d.ts +6 -1
  77. package/dist/mjs/toolbar/AbstractToolbar.mjs +6 -1
  78. package/dist/mjs/toolbar/IconProvider.d.ts +1 -1
  79. package/dist/mjs/toolbar/IconProvider.mjs +6 -1
  80. package/dist/mjs/toolbar/widgets/BaseWidget.d.ts +8 -0
  81. package/dist/mjs/toolbar/widgets/BaseWidget.mjs +8 -0
  82. package/dist/mjs/toolbar/widgets/HandToolWidget.d.ts +1 -0
  83. package/dist/mjs/toolbar/widgets/HandToolWidget.mjs +1 -0
  84. package/dist/mjs/toolbar/widgets/PenToolWidget.d.ts +6 -0
  85. package/dist/mjs/toolbar/widgets/PenToolWidget.mjs +5 -0
  86. package/dist/mjs/types.d.ts +5 -0
  87. package/dist/mjs/types.mjs +1 -0
  88. package/dist/mjs/util/ClipboardHandler.d.ts +9 -1
  89. package/dist/mjs/util/ClipboardHandler.mjs +82 -24
  90. package/dist/mjs/version.mjs +1 -1
  91. package/package.json +8 -9
  92. package/src/dialogs/dialogs.scss +9 -21
  93. package/src/dialogs/makeAboutDialog.scss +13 -33
  94. package/src/dialogs/makeMessageDialog.scss +46 -0
  95. package/dist/cjs/tools/BaseTool.d.ts +0 -60
  96. package/dist/cjs/tools/BaseTool.js +0 -174
  97. package/dist/cjs/tools/Eraser.d.ts +0 -56
  98. package/dist/cjs/tools/Eraser.js +0 -295
  99. package/dist/cjs/tools/Eraser.test.d.ts +0 -1
  100. package/dist/cjs/tools/FindTool.d.ts +0 -21
  101. package/dist/cjs/tools/FindTool.js +0 -137
  102. package/dist/cjs/tools/FindTool.test.d.ts +0 -1
  103. package/dist/cjs/tools/InputFilter/FunctionMapper.d.ts +0 -12
  104. package/dist/cjs/tools/InputFilter/FunctionMapper.js +0 -21
  105. package/dist/cjs/tools/InputFilter/InputMapper.d.ts +0 -23
  106. package/dist/cjs/tools/InputFilter/InputMapper.js +0 -38
  107. package/dist/cjs/tools/InputFilter/InputPipeline.d.ts +0 -15
  108. package/dist/cjs/tools/InputFilter/InputPipeline.js +0 -54
  109. package/dist/cjs/tools/InputFilter/InputPipeline.test.d.ts +0 -1
  110. package/dist/cjs/tools/InputFilter/InputStabilizer.d.ts +0 -29
  111. package/dist/cjs/tools/InputFilter/InputStabilizer.js +0 -181
  112. package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.d.ts +0 -21
  113. package/dist/cjs/tools/InputFilter/StrokeKeyboardControl.js +0 -84
  114. package/dist/cjs/tools/PanZoom.d.ts +0 -119
  115. package/dist/cjs/tools/PanZoom.js +0 -508
  116. package/dist/cjs/tools/PanZoom.test.d.ts +0 -1
  117. package/dist/cjs/tools/PasteHandler.d.ts +0 -23
  118. package/dist/cjs/tools/PasteHandler.js +0 -109
  119. package/dist/cjs/tools/Pen.d.ts +0 -53
  120. package/dist/cjs/tools/Pen.js +0 -318
  121. package/dist/cjs/tools/Pen.test.d.ts +0 -1
  122. package/dist/cjs/tools/PipetteTool.d.ts +0 -28
  123. package/dist/cjs/tools/PipetteTool.js +0 -69
  124. package/dist/cjs/tools/ScrollbarTool.d.ts +0 -18
  125. package/dist/cjs/tools/ScrollbarTool.js +0 -85
  126. package/dist/cjs/tools/SelectionTool/SelectAllShortcutHandler.d.ts +0 -9
  127. package/dist/cjs/tools/SelectionTool/SelectAllShortcutHandler.js +0 -32
  128. package/dist/cjs/tools/SelectionTool/Selection.d.ts +0 -71
  129. package/dist/cjs/tools/SelectionTool/Selection.js +0 -620
  130. package/dist/cjs/tools/SelectionTool/SelectionHandle.d.ts +0 -62
  131. package/dist/cjs/tools/SelectionTool/SelectionHandle.js +0 -141
  132. package/dist/cjs/tools/SelectionTool/SelectionTool.d.ts +0 -40
  133. package/dist/cjs/tools/SelectionTool/SelectionTool.js +0 -494
  134. package/dist/cjs/tools/SelectionTool/SelectionTool.selecting.test.d.ts +0 -1
  135. package/dist/cjs/tools/SelectionTool/SelectionTool.test.d.ts +0 -1
  136. package/dist/cjs/tools/SelectionTool/ToPointerAutoscroller.d.ts +0 -23
  137. package/dist/cjs/tools/SelectionTool/ToPointerAutoscroller.js +0 -83
  138. package/dist/cjs/tools/SelectionTool/TransformMode.d.ts +0 -42
  139. package/dist/cjs/tools/SelectionTool/TransformMode.js +0 -155
  140. package/dist/cjs/tools/SelectionTool/types.d.ts +0 -28
  141. package/dist/cjs/tools/SelectionTool/types.js +0 -14
  142. package/dist/cjs/tools/SoundUITool.d.ts +0 -26
  143. package/dist/cjs/tools/SoundUITool.js +0 -171
  144. package/dist/cjs/tools/TextTool.d.ts +0 -36
  145. package/dist/cjs/tools/TextTool.js +0 -285
  146. package/dist/cjs/tools/TextTool.test.d.ts +0 -1
  147. package/dist/cjs/tools/ToolController.d.ts +0 -73
  148. package/dist/cjs/tools/ToolController.js +0 -304
  149. package/dist/cjs/tools/ToolController.test.d.ts +0 -1
  150. package/dist/cjs/tools/ToolEnabledGroup.d.ts +0 -6
  151. package/dist/cjs/tools/ToolEnabledGroup.js +0 -13
  152. package/dist/cjs/tools/ToolSwitcherShortcut.d.ts +0 -16
  153. package/dist/cjs/tools/ToolSwitcherShortcut.js +0 -40
  154. package/dist/cjs/tools/ToolbarShortcutHandler.d.ts +0 -12
  155. package/dist/cjs/tools/ToolbarShortcutHandler.js +0 -34
  156. package/dist/cjs/tools/UndoRedoShortcut.d.ts +0 -8
  157. package/dist/cjs/tools/UndoRedoShortcut.js +0 -27
  158. package/dist/cjs/tools/UndoRedoShortcut.test.d.ts +0 -1
  159. package/dist/cjs/tools/keybindings.d.ts +0 -18
  160. package/dist/cjs/tools/keybindings.js +0 -49
  161. package/dist/cjs/tools/lib.d.ts +0 -14
  162. package/dist/cjs/tools/lib.js +0 -36
  163. package/dist/cjs/tools/localization.d.ts +0 -34
  164. package/dist/cjs/tools/localization.js +0 -36
  165. package/dist/cjs/tools/util/StationaryPenDetector.d.ts +0 -22
  166. package/dist/cjs/tools/util/StationaryPenDetector.js +0 -95
  167. package/dist/mjs/tools/BaseTool.d.ts +0 -60
  168. package/dist/mjs/tools/BaseTool.mjs +0 -172
  169. package/dist/mjs/tools/Eraser.d.ts +0 -56
  170. package/dist/mjs/tools/Eraser.mjs +0 -288
  171. package/dist/mjs/tools/Eraser.test.d.ts +0 -1
  172. package/dist/mjs/tools/FindTool.d.ts +0 -21
  173. package/dist/mjs/tools/FindTool.mjs +0 -131
  174. package/dist/mjs/tools/FindTool.test.d.ts +0 -1
  175. package/dist/mjs/tools/InputFilter/FunctionMapper.d.ts +0 -12
  176. package/dist/mjs/tools/InputFilter/FunctionMapper.mjs +0 -15
  177. package/dist/mjs/tools/InputFilter/InputMapper.d.ts +0 -23
  178. package/dist/mjs/tools/InputFilter/InputMapper.mjs +0 -36
  179. package/dist/mjs/tools/InputFilter/InputPipeline.d.ts +0 -15
  180. package/dist/mjs/tools/InputFilter/InputPipeline.mjs +0 -49
  181. package/dist/mjs/tools/InputFilter/InputPipeline.test.d.ts +0 -1
  182. package/dist/mjs/tools/InputFilter/InputStabilizer.d.ts +0 -29
  183. package/dist/mjs/tools/InputFilter/InputStabilizer.mjs +0 -175
  184. package/dist/mjs/tools/InputFilter/StrokeKeyboardControl.d.ts +0 -21
  185. package/dist/mjs/tools/InputFilter/StrokeKeyboardControl.mjs +0 -78
  186. package/dist/mjs/tools/PanZoom.d.ts +0 -119
  187. package/dist/mjs/tools/PanZoom.mjs +0 -501
  188. package/dist/mjs/tools/PanZoom.test.d.ts +0 -1
  189. package/dist/mjs/tools/PasteHandler.d.ts +0 -23
  190. package/dist/mjs/tools/PasteHandler.mjs +0 -103
  191. package/dist/mjs/tools/Pen.d.ts +0 -53
  192. package/dist/mjs/tools/Pen.mjs +0 -312
  193. package/dist/mjs/tools/Pen.test.d.ts +0 -1
  194. package/dist/mjs/tools/PipetteTool.d.ts +0 -28
  195. package/dist/mjs/tools/PipetteTool.mjs +0 -63
  196. package/dist/mjs/tools/ScrollbarTool.d.ts +0 -18
  197. package/dist/mjs/tools/ScrollbarTool.mjs +0 -79
  198. package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.d.ts +0 -9
  199. package/dist/mjs/tools/SelectionTool/SelectAllShortcutHandler.mjs +0 -26
  200. package/dist/mjs/tools/SelectionTool/Selection.d.ts +0 -71
  201. package/dist/mjs/tools/SelectionTool/Selection.mjs +0 -592
  202. package/dist/mjs/tools/SelectionTool/SelectionHandle.d.ts +0 -62
  203. package/dist/mjs/tools/SelectionTool/SelectionHandle.mjs +0 -137
  204. package/dist/mjs/tools/SelectionTool/SelectionTool.d.ts +0 -40
  205. package/dist/mjs/tools/SelectionTool/SelectionTool.mjs +0 -488
  206. package/dist/mjs/tools/SelectionTool/SelectionTool.selecting.test.d.ts +0 -1
  207. package/dist/mjs/tools/SelectionTool/SelectionTool.test.d.ts +0 -1
  208. package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.d.ts +0 -23
  209. package/dist/mjs/tools/SelectionTool/ToPointerAutoscroller.mjs +0 -77
  210. package/dist/mjs/tools/SelectionTool/TransformMode.d.ts +0 -42
  211. package/dist/mjs/tools/SelectionTool/TransformMode.mjs +0 -146
  212. package/dist/mjs/tools/SelectionTool/types.d.ts +0 -28
  213. package/dist/mjs/tools/SelectionTool/types.mjs +0 -11
  214. package/dist/mjs/tools/SoundUITool.d.ts +0 -26
  215. package/dist/mjs/tools/SoundUITool.mjs +0 -165
  216. package/dist/mjs/tools/TextTool.d.ts +0 -36
  217. package/dist/mjs/tools/TextTool.mjs +0 -279
  218. package/dist/mjs/tools/TextTool.test.d.ts +0 -1
  219. package/dist/mjs/tools/ToolController.d.ts +0 -73
  220. package/dist/mjs/tools/ToolController.mjs +0 -275
  221. package/dist/mjs/tools/ToolController.test.d.ts +0 -1
  222. package/dist/mjs/tools/ToolEnabledGroup.d.ts +0 -6
  223. package/dist/mjs/tools/ToolEnabledGroup.mjs +0 -10
  224. package/dist/mjs/tools/ToolSwitcherShortcut.d.ts +0 -16
  225. package/dist/mjs/tools/ToolSwitcherShortcut.mjs +0 -34
  226. package/dist/mjs/tools/ToolbarShortcutHandler.d.ts +0 -12
  227. package/dist/mjs/tools/ToolbarShortcutHandler.mjs +0 -28
  228. package/dist/mjs/tools/UndoRedoShortcut.d.ts +0 -8
  229. package/dist/mjs/tools/UndoRedoShortcut.mjs +0 -21
  230. package/dist/mjs/tools/UndoRedoShortcut.test.d.ts +0 -1
  231. package/dist/mjs/tools/keybindings.d.ts +0 -18
  232. package/dist/mjs/tools/keybindings.mjs +0 -43
  233. package/dist/mjs/tools/lib.d.ts +0 -14
  234. package/dist/mjs/tools/lib.mjs +0 -14
  235. package/dist/mjs/tools/localization.d.ts +0 -34
  236. package/dist/mjs/tools/localization.mjs +0 -33
  237. package/dist/mjs/tools/util/StationaryPenDetector.d.ts +0 -22
  238. package/dist/mjs/tools/util/StationaryPenDetector.mjs +0 -92
  239. package/src/tools/FindTool.css +0 -7
  240. package/src/tools/ScrollbarTool.scss +0 -57
  241. package/src/tools/SelectionTool/SelectionTool.scss +0 -137
  242. package/src/tools/SoundUITool.scss +0 -22
  243. package/src/tools/tools.scss +0 -5
@@ -1,279 +0,0 @@
1
- import TextComponent from '../components/TextComponent.mjs';
2
- import EditorImage from '../image/EditorImage.mjs';
3
- import { Rect2, Mat33, Vec2, Color4 } from '@js-draw/math';
4
- import { PointerDevice } from '../Pointer.mjs';
5
- import { EditorEventType } from '../types.mjs';
6
- import BaseTool from './BaseTool.mjs';
7
- import Erase from '../commands/Erase.mjs';
8
- import uniteCommands from '../commands/uniteCommands.mjs';
9
- import { ReactiveValue } from '../util/ReactiveValue.mjs';
10
- const overlayCSSClass = 'textEditorOverlay';
11
- export default class TextTool extends BaseTool {
12
- constructor(editor, description, localizationTable) {
13
- super(editor.notifier, description);
14
- this.editor = editor;
15
- this.localizationTable = localizationTable;
16
- this.textInputElem = null;
17
- this.textTargetPosition = null;
18
- this.textMeasuringCtx = null;
19
- this.textScale = Vec2.of(1, 1);
20
- this.removeExistingCommand = null;
21
- const editorFonts = editor.getCurrentSettings().text?.fonts ?? [];
22
- this.textStyleValue = ReactiveValue.fromInitialValue({
23
- size: 32,
24
- fontFamily: editorFonts.length > 0 ? editorFonts[0] : 'sans-serif',
25
- renderingStyle: {
26
- fill: Color4.purple,
27
- },
28
- });
29
- this.textStyleValue.onUpdateAndNow(() => {
30
- this.textStyle = this.textStyleValue.get();
31
- this.updateTextInput();
32
- this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
33
- kind: EditorEventType.ToolUpdated,
34
- tool: this,
35
- });
36
- });
37
- this.textEditOverlay = document.createElement('div');
38
- this.textEditOverlay.classList.add(overlayCSSClass);
39
- this.editor.addStyleSheet(`
40
- .${overlayCSSClass} {
41
- height: 0;
42
- overflow: visible;
43
-
44
- /* Allows absolutely-positioned textareas to scroll with
45
- the containing overlay. */
46
- position: relative;
47
- }
48
-
49
- .${overlayCSSClass} textarea {
50
- background-color: rgba(0, 0, 0, 0);
51
-
52
- white-space: pre;
53
- overflow: hidden;
54
-
55
- padding: 0;
56
- margin: 0;
57
- border: none;
58
- padding: 0;
59
-
60
- min-width: 100px;
61
- min-height: 1.1em;
62
- }
63
- `);
64
- this.editor.createHTMLOverlay(this.textEditOverlay);
65
- this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
66
- }
67
- initTextMeasuringCanvas() {
68
- this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
69
- }
70
- getTextAscent(text, style) {
71
- this.initTextMeasuringCanvas();
72
- if (this.textMeasuringCtx) {
73
- this.textMeasuringCtx.textBaseline = 'alphabetic';
74
- TextComponent.applyTextStyles(this.textMeasuringCtx, style);
75
- const measurement = this.textMeasuringCtx.measureText(text);
76
- return measurement.fontBoundingBoxAscent ?? measurement.actualBoundingBoxAscent;
77
- }
78
- // Estimate
79
- return style.size * 2 / 3;
80
- }
81
- // Take input from this' textInputElem and add it to the EditorImage.
82
- // If [removeInput], the HTML input element is removed. Otherwise, its value
83
- // is cleared.
84
- flushInput(removeInput = true) {
85
- if (this.textInputElem && this.textTargetPosition) {
86
- const content = this.textInputElem.value.trimEnd();
87
- this.textInputElem.value = '';
88
- if (removeInput) {
89
- // In some browsers, .remove() triggers a .blur event (synchronously).
90
- // Clear this.textInputElem before removal
91
- const input = this.textInputElem;
92
- this.textInputElem = null;
93
- input.remove();
94
- }
95
- if (content === '') {
96
- return;
97
- }
98
- const textTransform = Mat33.translation(this.textTargetPosition).rightMul(this.getTextScaleMatrix()).rightMul(Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())).rightMul(Mat33.zRotation(this.textRotation));
99
- const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
100
- const action = EditorImage.addElement(textComponent);
101
- if (this.removeExistingCommand) {
102
- // Unapply so that `removeExistingCommand` can be added to the undo stack.
103
- this.removeExistingCommand.unapply(this.editor);
104
- this.editor.dispatch(uniteCommands([this.removeExistingCommand, action]));
105
- this.removeExistingCommand = null;
106
- }
107
- else {
108
- this.editor.dispatch(action);
109
- }
110
- }
111
- }
112
- getTextScaleMatrix() {
113
- return Mat33.scaling2D(this.textScale.times(1 / this.editor.viewport.getSizeOfPixelOnCanvas()));
114
- }
115
- updateTextInput() {
116
- if (!this.textInputElem || !this.textTargetPosition) {
117
- this.textInputElem?.remove();
118
- return;
119
- }
120
- const viewport = this.editor.viewport;
121
- const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
122
- this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
123
- this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
124
- this.textInputElem.style.fontStyle = this.textStyle.fontStyle ?? '';
125
- this.textInputElem.style.fontVariant = this.textStyle.fontVariant ?? '';
126
- this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
127
- this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
128
- this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
129
- this.textInputElem.style.position = 'absolute';
130
- this.textInputElem.style.left = `${textScreenPos.x}px`;
131
- this.textInputElem.style.top = `${textScreenPos.y}px`;
132
- this.textInputElem.style.margin = '0';
133
- this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
134
- this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
135
- // Get the ascent based on the font, using a string of characters
136
- // that is tall in most fonts.
137
- const tallText = 'Testing!';
138
- const ascent = this.getTextAscent(tallText, this.textStyle);
139
- const vertAdjust = ascent;
140
- const rotation = this.textRotation + viewport.getRotationAngle();
141
- const scale = this.getTextScaleMatrix();
142
- this.textInputElem.style.transform =
143
- `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-vertAdjust}px)`;
144
- this.textInputElem.style.transformOrigin = 'top left';
145
- // Match the line height of default rendered text.
146
- const lineHeight = Math.floor(this.textStyle.size);
147
- this.textInputElem.style.lineHeight = `${lineHeight}px`;
148
- }
149
- startTextInput(textCanvasPos, initialText) {
150
- this.flushInput();
151
- this.textInputElem = document.createElement('textarea');
152
- this.textInputElem.value = initialText;
153
- this.textInputElem.style.display = 'inline-block';
154
- this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
155
- this.textRotation = -this.editor.viewport.getRotationAngle();
156
- this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
157
- this.updateTextInput();
158
- // Update the input size/position/etc. after the placeHolder has had time to appear.
159
- setTimeout(() => this.updateTextInput(), 0);
160
- this.textInputElem.oninput = () => {
161
- if (this.textInputElem) {
162
- this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
163
- this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
164
- }
165
- };
166
- this.textInputElem.onblur = () => {
167
- // Delay removing the input -- flushInput may be called within a blur()
168
- // event handler
169
- const removeInput = false;
170
- const input = this.textInputElem;
171
- this.flushInput(removeInput);
172
- this.textInputElem = null;
173
- setTimeout(() => {
174
- input?.remove();
175
- }, 0);
176
- };
177
- this.textInputElem.onkeyup = (evt) => {
178
- if (evt.key === 'Enter' && !evt.shiftKey) {
179
- this.flushInput();
180
- this.editor.focus();
181
- }
182
- else if (evt.key === 'Escape') {
183
- // Cancel input.
184
- this.textInputElem?.remove();
185
- this.textInputElem = null;
186
- this.editor.focus();
187
- this.removeExistingCommand?.unapply(this.editor);
188
- this.removeExistingCommand = null;
189
- }
190
- };
191
- this.textEditOverlay.replaceChildren(this.textInputElem);
192
- setTimeout(() => this.textInputElem?.focus(), 0);
193
- }
194
- setEnabled(enabled) {
195
- super.setEnabled(enabled);
196
- if (!this.isEnabled()) {
197
- this.flushInput();
198
- }
199
- this.textEditOverlay.style.display = enabled ? 'block' : 'none';
200
- }
201
- onPointerDown({ current, allPointers }) {
202
- if (current.device === PointerDevice.Eraser) {
203
- return false;
204
- }
205
- if (allPointers.length === 1) {
206
- // Are we clicking on a text node?
207
- const canvasPos = current.canvasPos;
208
- const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
209
- const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
210
- const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
211
- let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
212
- // Don't try to edit text nodes that contain the viewport (this allows us
213
- // to zoom in on text nodes and add text on top of them.)
214
- const visibleRect = this.editor.viewport.visibleRect;
215
- targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
216
- // End any TextNodes we're currently editing.
217
- this.flushInput();
218
- if (targetTextNodes.length > 0) {
219
- const targetNode = targetTextNodes[targetTextNodes.length - 1];
220
- this.setTextStyle(targetNode.getTextStyle());
221
- // Create and temporarily apply removeExistingCommand.
222
- this.removeExistingCommand = new Erase([targetNode]);
223
- this.removeExistingCommand.apply(this.editor);
224
- this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
225
- const transform = targetNode.getTransform();
226
- this.textRotation = transform.transformVec3(Vec2.unitX).angle();
227
- const scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
228
- this.textScale = Vec2.of(1, 1).times(scaleFactor);
229
- this.updateTextInput();
230
- }
231
- else {
232
- this.removeExistingCommand = null;
233
- this.startTextInput(current.canvasPos, '');
234
- }
235
- return true;
236
- }
237
- return false;
238
- }
239
- onGestureCancel() {
240
- this.flushInput();
241
- this.editor.focus();
242
- }
243
- setFontFamily(fontFamily) {
244
- if (fontFamily !== this.textStyle.fontFamily) {
245
- this.textStyleValue.set({
246
- ...this.textStyle,
247
- fontFamily: fontFamily,
248
- });
249
- }
250
- }
251
- setColor(color) {
252
- if (!color.eq(this.textStyle.renderingStyle.fill)) {
253
- this.textStyleValue.set({
254
- ...this.textStyle,
255
- renderingStyle: {
256
- ...this.textStyle.renderingStyle,
257
- fill: color,
258
- },
259
- });
260
- }
261
- }
262
- setFontSize(size) {
263
- if (size !== this.textStyle.size) {
264
- this.textStyleValue.set({
265
- ...this.textStyle,
266
- size,
267
- });
268
- }
269
- }
270
- getTextStyle() {
271
- return this.textStyle;
272
- }
273
- getStyleValue() {
274
- return this.textStyleValue;
275
- }
276
- setTextStyle(style) {
277
- this.textStyleValue.set(style);
278
- }
279
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,73 +0,0 @@
1
- import Editor from '../Editor';
2
- import BaseTool from './BaseTool';
3
- import ToolEnabledGroup from './ToolEnabledGroup';
4
- import { ToolLocalization } from './localization';
5
- import InputMapper, { InputEventListener } from './InputFilter/InputMapper';
6
- import { InputEvt } from '../inputEvents';
7
- export default class ToolController implements InputEventListener {
8
- private tools;
9
- private activeTool;
10
- private primaryToolGroup;
11
- private inputPipeline;
12
- private isEditorReadOnly;
13
- /** @internal */
14
- constructor(editor: Editor, localization: ToolLocalization);
15
- /**
16
- * Replaces the current set of tools with `tools`. This should only be done before
17
- * the creation of the app's toolbar (if using `AbstractToolbar`).
18
- *
19
- * If no `primaryToolGroup` is given, an empty one will be created.
20
- */
21
- setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
22
- /**
23
- * Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
24
- *
25
- * If the tool is already added to this, the tool is converted to a primary tool.
26
- *
27
- * This should be called before creating the app's toolbar.
28
- */
29
- addPrimaryTool(tool: BaseTool): void;
30
- getPrimaryTools(): BaseTool[];
31
- /**
32
- * Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
33
- * This should be called before creating the app's toolbar.
34
- *
35
- * If `options.addToFront`, the tool is added to the beginning of this' tool list.
36
- *
37
- * Does nothing if the tool is already present.
38
- */
39
- addTool(tool: BaseTool, options?: {
40
- addToFront: boolean;
41
- }): void;
42
- /**
43
- * Removes **and destroys** all tools in `tools` from this.
44
- */
45
- removeAndDestroyTools(tools: BaseTool[]): void;
46
- private insertTools;
47
- /**
48
- * Removes a tool from this' tool list and replaces it with `replaceWith`.
49
- *
50
- * If any of `toolsToInsert` have already been added to this, the tools are
51
- * moved.
52
- *
53
- * This should be called before creating the editor's toolbar.
54
- */
55
- insertToolsAfter(insertAfter: BaseTool, toolsToInsert: BaseTool[]): void;
56
- /** @see {@link insertToolsAfter} */
57
- insertToolsBefore(insertBefore: BaseTool, toolsToInsert: BaseTool[]): void;
58
- private onEventInternal;
59
- /** Alias for {@link dispatchInputEvent}. */
60
- onEvent(event: InputEvt): boolean;
61
- dispatchInputEvent(event: InputEvt): boolean;
62
- /**
63
- * Adds a new `InputMapper` to this' input pipeline.
64
- *
65
- * A `mapper` is really a relation that maps each event to no, one,
66
- * or many other events.
67
- *
68
- * @see {@link InputMapper}.
69
- */
70
- addInputMapper(mapper: InputMapper): void;
71
- getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];
72
- onEditorDestroyed(): void;
73
- }
@@ -1,275 +0,0 @@
1
- import { EditorEventType } from '../types.mjs';
2
- import { Color4 } from '@js-draw/math';
3
- import PanZoom, { PanZoomMode } from './PanZoom.mjs';
4
- import Pen from './Pen.mjs';
5
- import ToolEnabledGroup from './ToolEnabledGroup.mjs';
6
- import Eraser from './Eraser.mjs';
7
- import SelectionTool from './SelectionTool/SelectionTool.mjs';
8
- import UndoRedoShortcut from './UndoRedoShortcut.mjs';
9
- import TextTool from './TextTool.mjs';
10
- import PipetteTool from './PipetteTool.mjs';
11
- import ToolSwitcherShortcut from './ToolSwitcherShortcut.mjs';
12
- import PasteHandler from './PasteHandler.mjs';
13
- import ToolbarShortcutHandler from './ToolbarShortcutHandler.mjs';
14
- import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder.mjs';
15
- import FindTool from './FindTool.mjs';
16
- import SelectAllShortcutHandler from './SelectionTool/SelectAllShortcutHandler.mjs';
17
- import SoundUITool from './SoundUITool.mjs';
18
- import { InputEvtType } from '../inputEvents.mjs';
19
- import InputPipeline from './InputFilter/InputPipeline.mjs';
20
- import InputStabilizer from './InputFilter/InputStabilizer.mjs';
21
- import ScrollbarTool from './ScrollbarTool.mjs';
22
- export default class ToolController {
23
- /** @internal */
24
- constructor(editor, localization) {
25
- this.activeTool = null;
26
- this.isEditorReadOnly = editor.isReadOnlyReactiveValue();
27
- this.inputPipeline = new InputPipeline();
28
- this.inputPipeline.setEmitListener(event => this.onEventInternal(event));
29
- const primaryToolGroup = new ToolEnabledGroup();
30
- this.primaryToolGroup = primaryToolGroup;
31
- const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
32
- const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
33
- const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 8 });
34
- const secondaryPenTool = new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 });
35
- // Stabilize the secondary pen tool.
36
- secondaryPenTool.setInputMapper(new InputStabilizer(editor.viewport));
37
- const eraser = new Eraser(editor, localization.eraserTool);
38
- const primaryTools = [
39
- // Three pens
40
- primaryPenTool,
41
- secondaryPenTool,
42
- // Highlighter-like pen with width=40
43
- new Pen(editor, localization.penTool(3), {
44
- color: Color4.ofRGBA(1, 1, 0, 0.5),
45
- thickness: 40,
46
- factory: makePressureSensitiveFreehandLineBuilder
47
- }),
48
- eraser,
49
- new SelectionTool(editor, localization.selectionTool),
50
- new TextTool(editor, localization.textTool, localization),
51
- new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning),
52
- ];
53
- // Accessibility tools
54
- const soundExplorer = new SoundUITool(editor, localization.soundExplorer);
55
- soundExplorer.setEnabled(false);
56
- this.tools = [
57
- new ScrollbarTool(editor),
58
- new PipetteTool(editor, localization.pipetteTool),
59
- soundExplorer,
60
- panZoomTool,
61
- ...primaryTools,
62
- keyboardPanZoomTool,
63
- new UndoRedoShortcut(editor),
64
- new ToolbarShortcutHandler(editor),
65
- new ToolSwitcherShortcut(editor),
66
- eraser.makeEraserSwitcherTool(),
67
- new FindTool(editor),
68
- new PasteHandler(editor),
69
- new SelectAllShortcutHandler(editor),
70
- ];
71
- primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
72
- panZoomTool.setEnabled(true);
73
- primaryPenTool.setEnabled(true);
74
- editor.notifier.on(EditorEventType.ToolEnabled, event => {
75
- if (event.kind === EditorEventType.ToolEnabled) {
76
- editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
77
- }
78
- });
79
- editor.notifier.on(EditorEventType.ToolDisabled, event => {
80
- if (event.kind === EditorEventType.ToolDisabled) {
81
- editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
82
- }
83
- });
84
- this.activeTool = null;
85
- }
86
- /**
87
- * Replaces the current set of tools with `tools`. This should only be done before
88
- * the creation of the app's toolbar (if using `AbstractToolbar`).
89
- *
90
- * If no `primaryToolGroup` is given, an empty one will be created.
91
- */
92
- setTools(tools, primaryToolGroup) {
93
- this.tools = tools;
94
- this.primaryToolGroup = primaryToolGroup ?? new ToolEnabledGroup();
95
- }
96
- /**
97
- * Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
98
- *
99
- * If the tool is already added to this, the tool is converted to a primary tool.
100
- *
101
- * This should be called before creating the app's toolbar.
102
- */
103
- addPrimaryTool(tool) {
104
- tool.setToolGroup(this.primaryToolGroup);
105
- if (tool.isEnabled()) {
106
- this.primaryToolGroup.notifyEnabled(tool);
107
- }
108
- if (!this.tools.includes(tool)) {
109
- this.addTool(tool);
110
- }
111
- }
112
- getPrimaryTools() {
113
- return this.tools.filter(tool => {
114
- return tool.getToolGroup() === this.primaryToolGroup;
115
- });
116
- }
117
- /**
118
- * Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
119
- * This should be called before creating the app's toolbar.
120
- *
121
- * If `options.addToFront`, the tool is added to the beginning of this' tool list.
122
- *
123
- * Does nothing if the tool is already present.
124
- */
125
- addTool(tool, options) {
126
- // Only add if not already present.
127
- if (!this.tools.includes(tool)) {
128
- if (options?.addToFront) {
129
- this.tools.splice(0, 0, tool);
130
- }
131
- else {
132
- this.tools.push(tool);
133
- }
134
- }
135
- }
136
- /**
137
- * Removes **and destroys** all tools in `tools` from this.
138
- */
139
- removeAndDestroyTools(tools) {
140
- const newTools = [];
141
- for (const tool of this.tools) {
142
- if (tools.includes(tool)) {
143
- if (this.activeTool === tool) {
144
- this.activeTool = null;
145
- }
146
- tool.onDestroy();
147
- }
148
- else {
149
- newTools.push(tool);
150
- }
151
- }
152
- this.tools = newTools;
153
- }
154
- insertTools(insertNear, toolsToInsert, mode) {
155
- this.tools = this.tools.filter(tool => !toolsToInsert.includes(tool));
156
- const newTools = [];
157
- for (const tool of this.tools) {
158
- if (mode === 'after') {
159
- newTools.push(tool);
160
- }
161
- if (tool === insertNear) {
162
- newTools.push(...toolsToInsert);
163
- }
164
- if (mode === 'before') {
165
- newTools.push(tool);
166
- }
167
- }
168
- this.tools = newTools;
169
- }
170
- /**
171
- * Removes a tool from this' tool list and replaces it with `replaceWith`.
172
- *
173
- * If any of `toolsToInsert` have already been added to this, the tools are
174
- * moved.
175
- *
176
- * This should be called before creating the editor's toolbar.
177
- */
178
- insertToolsAfter(insertAfter, toolsToInsert) {
179
- this.insertTools(insertAfter, toolsToInsert, 'after');
180
- }
181
- /** @see {@link insertToolsAfter} */
182
- insertToolsBefore(insertBefore, toolsToInsert) {
183
- this.insertTools(insertBefore, toolsToInsert, 'before');
184
- }
185
- // @internal use `dispatchEvent` rather than calling `onEvent` directly.
186
- onEventInternal(event) {
187
- const isEditorReadOnly = this.isEditorReadOnly.get();
188
- const canToolReceiveInput = (tool) => {
189
- return tool.isEnabled() && (!isEditorReadOnly || tool.canReceiveInputInReadOnlyEditor());
190
- };
191
- let handled = false;
192
- if (event.kind === InputEvtType.PointerDownEvt) {
193
- let canOnlySendToActiveTool = false;
194
- if (this.activeTool && !this.activeTool.eventCanBeDeliveredToNonActiveTool(event)) {
195
- canOnlySendToActiveTool = true;
196
- }
197
- for (const tool of this.tools) {
198
- if (canOnlySendToActiveTool && tool !== this.activeTool) {
199
- continue;
200
- }
201
- if (canToolReceiveInput(tool) && tool.onEvent(event)) {
202
- if (this.activeTool !== tool) {
203
- this.activeTool?.onEvent({ kind: InputEvtType.GestureCancelEvt });
204
- }
205
- this.activeTool = tool;
206
- handled = true;
207
- break;
208
- }
209
- }
210
- }
211
- else if (event.kind === InputEvtType.PointerUpEvt) {
212
- const upResult = this.activeTool?.onEvent(event);
213
- const continueHandlingEvents = upResult && event.allPointers.length > 1;
214
- // Should the active tool continue handling events (without an additional pointer down?)
215
- if (!continueHandlingEvents) {
216
- // No -- Remove the current tool
217
- this.activeTool = null;
218
- }
219
- handled = true;
220
- }
221
- else if (event.kind === InputEvtType.PointerMoveEvt) {
222
- if (this.activeTool !== null) {
223
- this.activeTool.onEvent(event);
224
- handled = true;
225
- }
226
- }
227
- else if (event.kind === InputEvtType.GestureCancelEvt) {
228
- if (this.activeTool !== null) {
229
- this.activeTool.onEvent(event);
230
- this.activeTool = null;
231
- }
232
- }
233
- else {
234
- for (const tool of this.tools) {
235
- if (!canToolReceiveInput(tool)) {
236
- continue;
237
- }
238
- handled = tool.onEvent(event);
239
- if (handled) {
240
- break;
241
- }
242
- }
243
- }
244
- return handled;
245
- }
246
- /** Alias for {@link dispatchInputEvent}. */
247
- onEvent(event) {
248
- return this.dispatchInputEvent(event);
249
- }
250
- // Returns true if the event was handled.
251
- dispatchInputEvent(event) {
252
- // Feed the event through the input pipeline
253
- return this.inputPipeline.onEvent(event);
254
- }
255
- /**
256
- * Adds a new `InputMapper` to this' input pipeline.
257
- *
258
- * A `mapper` is really a relation that maps each event to no, one,
259
- * or many other events.
260
- *
261
- * @see {@link InputMapper}.
262
- */
263
- addInputMapper(mapper) {
264
- this.inputPipeline.addToTail(mapper);
265
- }
266
- getMatchingTools(type) {
267
- return this.tools.filter(tool => tool instanceof type);
268
- }
269
- // @internal
270
- onEditorDestroyed() {
271
- for (const tool of this.tools) {
272
- tool.onDestroy();
273
- }
274
- }
275
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,6 +0,0 @@
1
- import BaseTool from './BaseTool';
2
- export default class ToolEnabledGroup {
3
- private activeTool;
4
- constructor();
5
- notifyEnabled(tool: BaseTool): void;
6
- }
@@ -1,10 +0,0 @@
1
- // Connects a group of tools -- at most one tool in the group can be enabled.
2
- export default class ToolEnabledGroup {
3
- constructor() { }
4
- notifyEnabled(tool) {
5
- if (tool !== this.activeTool) {
6
- this.activeTool?.setEnabled(false);
7
- this.activeTool = tool;
8
- }
9
- }
10
- }
@@ -1,16 +0,0 @@
1
- import Editor from '../Editor';
2
- import { KeyPressEvent } from '../inputEvents';
3
- import BaseTool from './BaseTool';
4
- /**
5
- * Handles keyboard events used, by default, to select tools. By default,
6
- * 1 maps to the first primary tool, 2 to the second primary tool, ... .
7
- *
8
- * This is in the default set of {@link ToolController} tools.
9
- *
10
- */
11
- export default class ToolSwitcherShortcut extends BaseTool {
12
- private editor;
13
- constructor(editor: Editor);
14
- canReceiveInputInReadOnlyEditor(): boolean;
15
- onKeyPress({ key }: KeyPressEvent): boolean;
16
- }