js-draw 0.18.2 → 0.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (227) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/bundle.js +2 -2
  3. package/dist/bundledStyles.js +1 -0
  4. package/dist/cjs/src/Color4.d.ts +8 -0
  5. package/dist/cjs/src/Color4.js +67 -0
  6. package/dist/cjs/src/Editor.d.ts +2 -2
  7. package/dist/cjs/src/Editor.js +2 -2
  8. package/dist/cjs/src/SVGLoader.js +8 -5
  9. package/dist/cjs/src/components/AbstractComponent.d.ts +2 -2
  10. package/dist/cjs/src/components/AbstractComponent.js +3 -3
  11. package/dist/cjs/src/components/ImageBackground.js +1 -1
  12. package/dist/cjs/src/components/RestylableComponent.d.ts +21 -2
  13. package/dist/cjs/src/components/Stroke.d.ts +35 -0
  14. package/dist/cjs/src/components/Stroke.js +36 -2
  15. package/dist/cjs/src/components/TextComponent.d.ts +26 -4
  16. package/dist/cjs/src/components/TextComponent.js +22 -0
  17. package/dist/cjs/src/components/lib.d.ts +3 -2
  18. package/dist/cjs/src/lib.d.ts +30 -0
  19. package/dist/cjs/src/lib.js +30 -0
  20. package/dist/cjs/src/rendering/RenderingStyle.d.ts +4 -4
  21. package/dist/cjs/src/rendering/TextRenderingStyle.d.ts +10 -10
  22. package/dist/cjs/src/rendering/lib.d.ts +2 -0
  23. package/dist/cjs/src/rendering/renderers/AbstractRenderer.d.ts +2 -2
  24. package/dist/cjs/src/rendering/renderers/CanvasRenderer.d.ts +2 -2
  25. package/dist/cjs/src/rendering/renderers/DummyRenderer.d.ts +2 -2
  26. package/dist/cjs/src/rendering/renderers/SVGRenderer.d.ts +2 -2
  27. package/dist/cjs/src/rendering/renderers/TextOnlyRenderer.d.ts +2 -2
  28. package/dist/cjs/src/toolbar/IconProvider.d.ts +2 -2
  29. package/dist/cjs/src/toolbar/localization.js +1 -1
  30. package/dist/cjs/src/toolbar/widgets/BaseWidget.js +1 -1
  31. package/dist/cjs/src/tools/SoundUITool.d.ts +24 -0
  32. package/dist/cjs/src/tools/SoundUITool.js +164 -0
  33. package/dist/cjs/src/tools/TextTool.d.ts +2 -2
  34. package/dist/cjs/src/tools/ToolController.js +6 -1
  35. package/dist/cjs/src/tools/lib.d.ts +1 -0
  36. package/dist/cjs/src/tools/lib.js +3 -1
  37. package/dist/cjs/src/tools/localization.d.ts +3 -0
  38. package/dist/cjs/src/tools/localization.js +3 -0
  39. package/dist/mjs/src/Color4.d.ts +8 -0
  40. package/dist/mjs/src/Color4.mjs +64 -0
  41. package/dist/mjs/src/Editor.d.ts +2 -2
  42. package/dist/mjs/src/Editor.mjs +2 -2
  43. package/dist/mjs/src/SVGLoader.mjs +8 -5
  44. package/dist/mjs/src/components/AbstractComponent.d.ts +2 -2
  45. package/dist/mjs/src/components/AbstractComponent.mjs +3 -3
  46. package/dist/mjs/src/components/ImageBackground.mjs +1 -1
  47. package/dist/mjs/src/components/RestylableComponent.d.ts +21 -2
  48. package/dist/mjs/src/components/Stroke.d.ts +35 -0
  49. package/dist/mjs/src/components/Stroke.mjs +36 -2
  50. package/dist/mjs/src/components/TextComponent.d.ts +26 -4
  51. package/dist/mjs/src/components/TextComponent.mjs +22 -0
  52. package/dist/mjs/src/components/lib.d.ts +3 -2
  53. package/dist/mjs/src/lib.d.ts +30 -0
  54. package/dist/mjs/src/lib.mjs +30 -0
  55. package/dist/mjs/src/rendering/RenderingStyle.d.ts +4 -4
  56. package/dist/mjs/src/rendering/TextRenderingStyle.d.ts +10 -10
  57. package/dist/mjs/src/rendering/lib.d.ts +2 -0
  58. package/dist/mjs/src/rendering/renderers/AbstractRenderer.d.ts +2 -2
  59. package/dist/mjs/src/rendering/renderers/CanvasRenderer.d.ts +2 -2
  60. package/dist/mjs/src/rendering/renderers/DummyRenderer.d.ts +2 -2
  61. package/dist/mjs/src/rendering/renderers/SVGRenderer.d.ts +2 -2
  62. package/dist/mjs/src/rendering/renderers/TextOnlyRenderer.d.ts +2 -2
  63. package/dist/mjs/src/toolbar/IconProvider.d.ts +2 -2
  64. package/dist/mjs/src/toolbar/localization.mjs +1 -1
  65. package/dist/mjs/src/toolbar/widgets/BaseWidget.mjs +1 -1
  66. package/dist/mjs/src/tools/SoundUITool.d.ts +24 -0
  67. package/dist/mjs/src/tools/SoundUITool.mjs +158 -0
  68. package/dist/mjs/src/tools/TextTool.d.ts +2 -2
  69. package/dist/mjs/src/tools/ToolController.mjs +6 -1
  70. package/dist/mjs/src/tools/lib.d.ts +1 -0
  71. package/dist/mjs/src/tools/lib.mjs +1 -0
  72. package/dist/mjs/src/tools/localization.d.ts +3 -0
  73. package/dist/mjs/src/tools/localization.mjs +3 -0
  74. package/package.json +6 -4
  75. package/src/Editor.css +2 -2
  76. package/src/tools/SoundUITool.css +15 -0
  77. package/src/tools/tools.css +4 -0
  78. package/src/Color4.test.ts +0 -40
  79. package/src/Color4.ts +0 -236
  80. package/src/Editor.loadFrom.test.ts +0 -24
  81. package/src/Editor.toSVG.test.ts +0 -111
  82. package/src/Editor.ts +0 -1122
  83. package/src/EditorImage.test.ts +0 -120
  84. package/src/EditorImage.ts +0 -603
  85. package/src/EventDispatcher.test.ts +0 -123
  86. package/src/EventDispatcher.ts +0 -71
  87. package/src/Pointer.ts +0 -127
  88. package/src/SVGLoader.test.ts +0 -114
  89. package/src/SVGLoader.ts +0 -511
  90. package/src/UndoRedoHistory.test.ts +0 -33
  91. package/src/UndoRedoHistory.ts +0 -102
  92. package/src/Viewport.ts +0 -319
  93. package/src/bundle/bundled.ts +0 -7
  94. package/src/commands/Command.ts +0 -45
  95. package/src/commands/Duplicate.ts +0 -48
  96. package/src/commands/Erase.ts +0 -74
  97. package/src/commands/SerializableCommand.ts +0 -49
  98. package/src/commands/UnresolvedCommand.ts +0 -37
  99. package/src/commands/invertCommand.ts +0 -51
  100. package/src/commands/lib.ts +0 -16
  101. package/src/commands/localization.ts +0 -47
  102. package/src/commands/uniteCommands.test.ts +0 -23
  103. package/src/commands/uniteCommands.ts +0 -135
  104. package/src/components/AbstractComponent.transformBy.test.ts +0 -22
  105. package/src/components/AbstractComponent.ts +0 -364
  106. package/src/components/ImageBackground.test.ts +0 -35
  107. package/src/components/ImageBackground.ts +0 -176
  108. package/src/components/ImageComponent.ts +0 -171
  109. package/src/components/RestylableComponent.ts +0 -142
  110. package/src/components/SVGGlobalAttributesObject.ts +0 -81
  111. package/src/components/Stroke.test.ts +0 -139
  112. package/src/components/Stroke.ts +0 -245
  113. package/src/components/TextComponent.test.ts +0 -99
  114. package/src/components/TextComponent.ts +0 -315
  115. package/src/components/UnknownSVGObject.test.ts +0 -10
  116. package/src/components/UnknownSVGObject.ts +0 -60
  117. package/src/components/builders/ArrowBuilder.ts +0 -107
  118. package/src/components/builders/FreehandLineBuilder.ts +0 -212
  119. package/src/components/builders/LineBuilder.ts +0 -77
  120. package/src/components/builders/PressureSensitiveFreehandLineBuilder.ts +0 -454
  121. package/src/components/builders/RectangleBuilder.ts +0 -74
  122. package/src/components/builders/types.ts +0 -15
  123. package/src/components/lib.ts +0 -25
  124. package/src/components/localization.ts +0 -22
  125. package/src/components/util/StrokeSmoother.ts +0 -293
  126. package/src/components/util/describeComponentList.ts +0 -18
  127. package/src/lib.ts +0 -37
  128. package/src/localization.ts +0 -34
  129. package/src/localizations/de.ts +0 -98
  130. package/src/localizations/en.ts +0 -8
  131. package/src/localizations/es.ts +0 -74
  132. package/src/localizations/getLocalizationTable.test.ts +0 -27
  133. package/src/localizations/getLocalizationTable.ts +0 -55
  134. package/src/math/LineSegment2.test.ts +0 -99
  135. package/src/math/LineSegment2.ts +0 -160
  136. package/src/math/Mat33.test.ts +0 -244
  137. package/src/math/Mat33.ts +0 -437
  138. package/src/math/Path.fromString.test.ts +0 -223
  139. package/src/math/Path.test.ts +0 -198
  140. package/src/math/Path.toString.test.ts +0 -77
  141. package/src/math/Path.ts +0 -790
  142. package/src/math/Rect2.test.ts +0 -204
  143. package/src/math/Rect2.ts +0 -315
  144. package/src/math/Triangle.ts +0 -29
  145. package/src/math/Vec2.test.ts +0 -30
  146. package/src/math/Vec2.ts +0 -18
  147. package/src/math/Vec3.test.ts +0 -44
  148. package/src/math/Vec3.ts +0 -218
  149. package/src/math/lib.ts +0 -15
  150. package/src/math/rounding.test.ts +0 -65
  151. package/src/math/rounding.ts +0 -156
  152. package/src/rendering/Display.ts +0 -249
  153. package/src/rendering/RenderingStyle.test.ts +0 -68
  154. package/src/rendering/RenderingStyle.ts +0 -55
  155. package/src/rendering/TextRenderingStyle.ts +0 -45
  156. package/src/rendering/caching/CacheRecord.test.ts +0 -49
  157. package/src/rendering/caching/CacheRecord.ts +0 -77
  158. package/src/rendering/caching/CacheRecordManager.ts +0 -71
  159. package/src/rendering/caching/RenderingCache.test.ts +0 -44
  160. package/src/rendering/caching/RenderingCache.ts +0 -66
  161. package/src/rendering/caching/RenderingCacheNode.ts +0 -405
  162. package/src/rendering/caching/testUtils.ts +0 -35
  163. package/src/rendering/caching/types.ts +0 -34
  164. package/src/rendering/lib.ts +0 -6
  165. package/src/rendering/localization.ts +0 -20
  166. package/src/rendering/renderers/AbstractRenderer.ts +0 -222
  167. package/src/rendering/renderers/CanvasRenderer.ts +0 -296
  168. package/src/rendering/renderers/DummyRenderer.test.ts +0 -42
  169. package/src/rendering/renderers/DummyRenderer.ts +0 -136
  170. package/src/rendering/renderers/SVGRenderer.ts +0 -354
  171. package/src/rendering/renderers/TextOnlyRenderer.ts +0 -70
  172. package/src/testing/beforeEachFile.ts +0 -8
  173. package/src/testing/createEditor.ts +0 -11
  174. package/src/testing/global.d.ts +0 -17
  175. package/src/testing/lib.ts +0 -3
  176. package/src/testing/loadExpectExtensions.ts +0 -25
  177. package/src/testing/sendPenEvent.ts +0 -31
  178. package/src/testing/sendTouchEvent.ts +0 -78
  179. package/src/toolbar/HTMLToolbar.ts +0 -492
  180. package/src/toolbar/IconProvider.ts +0 -736
  181. package/src/toolbar/lib.ts +0 -4
  182. package/src/toolbar/localization.ts +0 -106
  183. package/src/toolbar/makeColorInput.ts +0 -145
  184. package/src/toolbar/types.ts +0 -5
  185. package/src/toolbar/widgets/ActionButtonWidget.ts +0 -39
  186. package/src/toolbar/widgets/BaseToolWidget.ts +0 -56
  187. package/src/toolbar/widgets/BaseWidget.ts +0 -377
  188. package/src/toolbar/widgets/DocumentPropertiesWidget.ts +0 -167
  189. package/src/toolbar/widgets/EraserToolWidget.ts +0 -85
  190. package/src/toolbar/widgets/HandToolWidget.ts +0 -250
  191. package/src/toolbar/widgets/InsertImageWidget.ts +0 -223
  192. package/src/toolbar/widgets/OverflowWidget.ts +0 -92
  193. package/src/toolbar/widgets/PenToolWidget.ts +0 -288
  194. package/src/toolbar/widgets/SelectionToolWidget.ts +0 -190
  195. package/src/toolbar/widgets/TextToolWidget.ts +0 -145
  196. package/src/toolbar/widgets/lib.ts +0 -13
  197. package/src/tools/BaseTool.ts +0 -76
  198. package/src/tools/Eraser.test.ts +0 -103
  199. package/src/tools/Eraser.ts +0 -139
  200. package/src/tools/FindTool.ts +0 -152
  201. package/src/tools/PanZoom.test.ts +0 -310
  202. package/src/tools/PanZoom.ts +0 -520
  203. package/src/tools/PasteHandler.ts +0 -95
  204. package/src/tools/Pen.test.ts +0 -194
  205. package/src/tools/Pen.ts +0 -226
  206. package/src/tools/PipetteTool.ts +0 -55
  207. package/src/tools/SelectionTool/SelectAllShortcutHandler.ts +0 -28
  208. package/src/tools/SelectionTool/Selection.ts +0 -607
  209. package/src/tools/SelectionTool/SelectionHandle.ts +0 -108
  210. package/src/tools/SelectionTool/SelectionTool.test.ts +0 -261
  211. package/src/tools/SelectionTool/SelectionTool.ts +0 -480
  212. package/src/tools/SelectionTool/TransformMode.ts +0 -114
  213. package/src/tools/SelectionTool/types.ts +0 -11
  214. package/src/tools/TextTool.ts +0 -326
  215. package/src/tools/ToolController.ts +0 -178
  216. package/src/tools/ToolEnabledGroup.ts +0 -14
  217. package/src/tools/ToolSwitcherShortcut.ts +0 -39
  218. package/src/tools/ToolbarShortcutHandler.ts +0 -34
  219. package/src/tools/UndoRedoShortcut.test.ts +0 -56
  220. package/src/tools/UndoRedoShortcut.ts +0 -25
  221. package/src/tools/lib.ts +0 -21
  222. package/src/tools/localization.ts +0 -66
  223. package/src/types.ts +0 -234
  224. package/src/util/assertions.ts +0 -55
  225. package/src/util/fileToBase64.ts +0 -18
  226. package/src/util/untilNextAnimationFrame.ts +0 -9
  227. package/src/util/waitForTimeout.ts +0 -9
@@ -1,326 +0,0 @@
1
- import Color4 from '../Color4';
2
- import TextComponent from '../components/TextComponent';
3
- import Editor from '../Editor';
4
- import EditorImage from '../EditorImage';
5
- import Rect2 from '../math/Rect2';
6
- import Mat33 from '../math/Mat33';
7
- import { Vec2 } from '../math/Vec2';
8
- import { PointerDevice } from '../Pointer';
9
- import { EditorEventType, PointerEvt } from '../types';
10
- import BaseTool from './BaseTool';
11
- import { ToolLocalization } from './localization';
12
- import Erase from '../commands/Erase';
13
- import uniteCommands from '../commands/uniteCommands';
14
- import TextStyle from '../rendering/TextRenderingStyle';
15
-
16
- const overlayCssClass = 'textEditorOverlay';
17
- export default class TextTool extends BaseTool {
18
- private textStyle: TextStyle;
19
-
20
- private textEditOverlay: HTMLElement;
21
- private textInputElem: HTMLTextAreaElement|null = null;
22
- private textTargetPosition: Vec2|null = null;
23
- private textMeasuringCtx: CanvasRenderingContext2D|null = null;
24
- private textRotation: number;
25
- private textScale: Vec2 = Vec2.of(1, 1);
26
-
27
- private removeExistingCommand: Erase|null = null;
28
-
29
- public constructor(private editor: Editor, description: string, private localizationTable: ToolLocalization) {
30
- super(editor.notifier, description);
31
- this.textStyle = {
32
- size: 32,
33
- fontFamily: 'sans-serif',
34
- renderingStyle: {
35
- fill: Color4.purple,
36
- },
37
- };
38
-
39
- this.textEditOverlay = document.createElement('div');
40
- this.textEditOverlay.classList.add(overlayCssClass);
41
- this.editor.addStyleSheet(`
42
- .${overlayCssClass} {
43
- height: 0;
44
- overflow: visible;
45
- }
46
-
47
- .${overlayCssClass} textarea {
48
- background-color: rgba(0, 0, 0, 0);
49
-
50
- white-space: pre;
51
- overflow: hidden;
52
-
53
- padding: 0;
54
- margin: 0;
55
- border: none;
56
- padding: 0;
57
-
58
- min-width: 100px;
59
- min-height: 1.1em;
60
- }
61
- `);
62
- this.editor.createHTMLOverlay(this.textEditOverlay);
63
- this.editor.notifier.on(EditorEventType.ViewportChanged, () => this.updateTextInput());
64
- }
65
-
66
- private getTextAscent(text: string, style: TextStyle): number {
67
- this.textMeasuringCtx ??= document.createElement('canvas').getContext('2d');
68
- if (this.textMeasuringCtx) {
69
- TextComponent.applyTextStyles(this.textMeasuringCtx, style);
70
- return this.textMeasuringCtx.measureText(text).actualBoundingBoxAscent;
71
- }
72
-
73
- // Estimate
74
- return style.size * 2 / 3;
75
- }
76
-
77
- // Take input from this' textInputElem and add it to the EditorImage.
78
- // If [removeInput], the HTML input element is removed. Otherwise, its value
79
- // is cleared.
80
- private flushInput(removeInput: boolean = true) {
81
- if (this.textInputElem && this.textTargetPosition) {
82
- const content = this.textInputElem.value.trimEnd();
83
-
84
- this.textInputElem.value = '';
85
-
86
- if (removeInput) {
87
- // In some browsers, .remove() triggers a .blur event (synchronously).
88
- // Clear this.textInputElem before removal
89
- const input = this.textInputElem;
90
- this.textInputElem = null;
91
- input.remove();
92
- }
93
-
94
- if (content === '') {
95
- return;
96
- }
97
-
98
- const textTransform = Mat33.translation(
99
- this.textTargetPosition
100
- ).rightMul(
101
- this.getTextScaleMatrix()
102
- ).rightMul(
103
- Mat33.scaling2D(this.editor.viewport.getSizeOfPixelOnCanvas())
104
- ).rightMul(
105
- Mat33.zRotation(this.textRotation)
106
- );
107
-
108
- const textComponent = TextComponent.fromLines(content.split('\n'), textTransform, this.textStyle);
109
-
110
- const action = EditorImage.addElement(textComponent);
111
- if (this.removeExistingCommand) {
112
- // Unapply so that `removeExistingCommand` can be added to the undo stack.
113
- this.removeExistingCommand.unapply(this.editor);
114
-
115
- this.editor.dispatch(uniteCommands([ this.removeExistingCommand, action ]));
116
- this.removeExistingCommand = null;
117
- } else {
118
- this.editor.dispatch(action);
119
- }
120
- }
121
- }
122
-
123
- private getTextScaleMatrix() {
124
- return Mat33.scaling2D(this.textScale.times(1/this.editor.viewport.getSizeOfPixelOnCanvas()));
125
- }
126
-
127
- private updateTextInput() {
128
- if (!this.textInputElem || !this.textTargetPosition) {
129
- this.textInputElem?.remove();
130
- return;
131
- }
132
-
133
- const viewport = this.editor.viewport;
134
- const textScreenPos = viewport.canvasToScreen(this.textTargetPosition);
135
- this.textInputElem.placeholder = this.localizationTable.enterTextToInsert;
136
- this.textInputElem.style.fontFamily = this.textStyle.fontFamily;
137
- this.textInputElem.style.fontVariant = this.textStyle.fontVariant ?? '';
138
- this.textInputElem.style.fontWeight = this.textStyle.fontWeight ?? '';
139
- this.textInputElem.style.fontSize = `${this.textStyle.size}px`;
140
- this.textInputElem.style.color = this.textStyle.renderingStyle.fill.toHexString();
141
-
142
- this.textInputElem.style.position = 'relative';
143
- this.textInputElem.style.left = `${textScreenPos.x}px`;
144
- this.textInputElem.style.top = `${textScreenPos.y}px`;
145
- this.textInputElem.style.margin = '0';
146
-
147
- this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
148
- this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
149
-
150
- // Get the ascent based on the font, using a character that is tall in most fonts.
151
- const tallCharacter = '⎢';
152
- const ascent = this.getTextAscent(tallCharacter, this.textStyle);
153
-
154
- const rotation = this.textRotation + viewport.getRotationAngle();
155
- const scale: Mat33 = this.getTextScaleMatrix();
156
- this.textInputElem.style.transform = `${scale.toCSSMatrix()} rotate(${rotation * 180 / Math.PI}deg) translate(0, ${-ascent}px)`;
157
- this.textInputElem.style.transformOrigin = 'top left';
158
- }
159
-
160
- private startTextInput(textCanvasPos: Vec2, initialText: string) {
161
- this.flushInput();
162
-
163
- this.textInputElem = document.createElement('textarea');
164
- this.textInputElem.value = initialText;
165
- this.textInputElem.style.display = 'inline-block';
166
- this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
167
- this.textRotation = -this.editor.viewport.getRotationAngle();
168
- this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
169
- this.updateTextInput();
170
-
171
- // Update the input size/position/etc. after the placeHolder has had time to appear.
172
- setTimeout(() => this.updateTextInput(), 0);
173
-
174
- this.textInputElem.oninput = () => {
175
- if (this.textInputElem) {
176
- this.textInputElem.style.width = `${this.textInputElem.scrollWidth}px`;
177
- this.textInputElem.style.height = `${this.textInputElem.scrollHeight}px`;
178
- }
179
- };
180
- this.textInputElem.onblur = () => {
181
- // Delay removing the input -- flushInput may be called within a blur()
182
- // event handler
183
- const removeInput = false;
184
- const input = this.textInputElem;
185
-
186
- this.flushInput(removeInput);
187
- this.textInputElem = null;
188
- setTimeout(() => {
189
- input?.remove();
190
- }, 0);
191
- };
192
- this.textInputElem.onkeyup = (evt) => {
193
- if (evt.key === 'Enter' && !evt.shiftKey) {
194
- this.flushInput();
195
- this.editor.focus();
196
- } else if (evt.key === 'Escape') {
197
- // Cancel input.
198
- this.textInputElem?.remove();
199
- this.textInputElem = null;
200
- this.editor.focus();
201
-
202
- this.removeExistingCommand?.unapply(this.editor);
203
- this.removeExistingCommand = null;
204
- }
205
- };
206
-
207
- this.textEditOverlay.replaceChildren(this.textInputElem);
208
- setTimeout(() => this.textInputElem?.focus(), 0);
209
- }
210
-
211
- public setEnabled(enabled: boolean) {
212
- super.setEnabled(enabled);
213
-
214
- if (!enabled) {
215
- this.flushInput();
216
- }
217
-
218
- this.textEditOverlay.style.display = enabled ? 'block' : 'none';
219
- }
220
-
221
- public onPointerDown({ current, allPointers }: PointerEvt): boolean {
222
- if (current.device === PointerDevice.Eraser) {
223
- return false;
224
- }
225
-
226
- if (allPointers.length === 1) {
227
-
228
- // Are we clicking on a text node?
229
- const canvasPos = current.canvasPos;
230
- const halfTestRegionSize = Vec2.of(2.5, 2.5).times(this.editor.viewport.getSizeOfPixelOnCanvas());
231
- const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
232
- const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
233
- let targetTextNodes = targetNodes.filter(node => node instanceof TextComponent) as TextComponent[];
234
-
235
- // Don't try to edit text nodes that contain the viewport (this allows us
236
- // to zoom in on text nodes and add text on top of them.)
237
- const visibleRect = this.editor.viewport.visibleRect;
238
- targetTextNodes = targetTextNodes.filter(node => !node.getBBox().containsRect(visibleRect));
239
-
240
- // End any TextNodes we're currently editing.
241
- this.flushInput();
242
-
243
- if (targetTextNodes.length > 0) {
244
- const targetNode = targetTextNodes[targetTextNodes.length - 1];
245
- this.setTextStyle(targetNode.getTextStyle());
246
-
247
- // Create and temporarily apply removeExistingCommand.
248
- this.removeExistingCommand = new Erase([ targetNode ]);
249
- this.removeExistingCommand.apply(this.editor);
250
-
251
- this.startTextInput(targetNode.getBaselinePos(), targetNode.getText());
252
-
253
- const transform = targetNode.getTransform();
254
- this.textRotation = transform.transformVec3(Vec2.unitX).angle();
255
- const scaleFactor = transform.transformVec3(Vec2.unitX).magnitude();
256
- this.textScale = Vec2.of(1, 1).times(scaleFactor);
257
- this.updateTextInput();
258
- } else {
259
- this.removeExistingCommand = null;
260
- this.startTextInput(current.canvasPos, '');
261
- }
262
- return true;
263
- }
264
-
265
- return false;
266
- }
267
-
268
- public onGestureCancel(): void {
269
- this.flushInput();
270
- this.editor.focus();
271
- }
272
-
273
- private dispatchUpdateEvent() {
274
- this.updateTextInput();
275
- this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
276
- kind: EditorEventType.ToolUpdated,
277
- tool: this,
278
- });
279
- }
280
-
281
- public setFontFamily(fontFamily: string) {
282
- if (fontFamily !== this.textStyle.fontFamily) {
283
- this.textStyle = {
284
- ...this.textStyle,
285
- fontFamily: fontFamily,
286
- };
287
-
288
- this.dispatchUpdateEvent();
289
- }
290
- }
291
-
292
- public setColor(color: Color4) {
293
- if (!color.eq(this.textStyle.renderingStyle.fill)) {
294
- this.textStyle = {
295
- ...this.textStyle,
296
- renderingStyle: {
297
- ...this.textStyle.renderingStyle,
298
- fill: color,
299
- },
300
- };
301
-
302
- this.dispatchUpdateEvent();
303
- }
304
- }
305
-
306
- public setFontSize(size: number) {
307
- if (size !== this.textStyle.size) {
308
- this.textStyle = {
309
- ...this.textStyle,
310
- size,
311
- };
312
-
313
- this.dispatchUpdateEvent();
314
- }
315
- }
316
-
317
- public getTextStyle(): TextStyle {
318
- return this.textStyle;
319
- }
320
-
321
- private setTextStyle(style: TextStyle) {
322
- // Copy the style — we may change parts of it.
323
- this.textStyle = { ...style, renderingStyle: { ...style.renderingStyle } };
324
- this.dispatchUpdateEvent();
325
- }
326
- }
@@ -1,178 +0,0 @@
1
- import { InputEvtType, InputEvt, EditorEventType } from '../types';
2
- import Editor from '../Editor';
3
- import BaseTool from './BaseTool';
4
- import PanZoom, { PanZoomMode } from './PanZoom';
5
- import Pen from './Pen';
6
- import ToolEnabledGroup from './ToolEnabledGroup';
7
- import Eraser from './Eraser';
8
- import SelectionTool from './SelectionTool/SelectionTool';
9
- import Color4 from '../Color4';
10
- import { ToolLocalization } from './localization';
11
- import UndoRedoShortcut from './UndoRedoShortcut';
12
- import TextTool from './TextTool';
13
- import PipetteTool from './PipetteTool';
14
- import ToolSwitcherShortcut from './ToolSwitcherShortcut';
15
- import PasteHandler from './PasteHandler';
16
- import ToolbarShortcutHandler from './ToolbarShortcutHandler';
17
- import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
18
- import FindTool from './FindTool';
19
- import SelectAllShortcutHandler from './SelectionTool/SelectAllShortcutHandler';
20
-
21
- export default class ToolController {
22
- private tools: BaseTool[];
23
- private activeTool: BaseTool|null = null;
24
- private primaryToolGroup: ToolEnabledGroup;
25
-
26
- /** @internal */
27
- public constructor(editor: Editor, localization: ToolLocalization) {
28
- const primaryToolGroup = new ToolEnabledGroup();
29
- this.primaryToolGroup = primaryToolGroup;
30
-
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 primaryTools = [
35
- // Three pens
36
- primaryPenTool,
37
- new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
38
-
39
- // Highlighter-like pen with width=40
40
- new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 40 }, makePressureSensitiveFreehandLineBuilder),
41
-
42
- new Eraser(editor, localization.eraserTool),
43
- new SelectionTool(editor, localization.selectionTool),
44
- new TextTool(editor, localization.textTool, localization),
45
- new PanZoom(editor, PanZoomMode.SinglePointerGestures, localization.anyDevicePanning)
46
- ];
47
- this.tools = [
48
- new PipetteTool(editor, localization.pipetteTool),
49
- panZoomTool,
50
- ...primaryTools,
51
- keyboardPanZoomTool,
52
- new UndoRedoShortcut(editor),
53
- new ToolbarShortcutHandler(editor),
54
- new ToolSwitcherShortcut(editor),
55
- new FindTool(editor),
56
- new PasteHandler(editor),
57
- new SelectAllShortcutHandler(editor),
58
- ];
59
- primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
60
- panZoomTool.setEnabled(true);
61
- primaryPenTool.setEnabled(true);
62
-
63
- editor.notifier.on(EditorEventType.ToolEnabled, event => {
64
- if (event.kind === EditorEventType.ToolEnabled) {
65
- editor.announceForAccessibility(localization.toolEnabledAnnouncement(event.tool.description));
66
- }
67
- });
68
- editor.notifier.on(EditorEventType.ToolDisabled, event => {
69
- if (event.kind === EditorEventType.ToolDisabled) {
70
- editor.announceForAccessibility(localization.toolDisabledAnnouncement(event.tool.description));
71
- }
72
- });
73
-
74
- this.activeTool = null;
75
- }
76
-
77
- // Replaces the current set of tools with `tools`. This should only be done before
78
- // the creation of the app's toolbar (if using `HTMLToolbar`).
79
- public setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup) {
80
- this.tools = tools;
81
- this.primaryToolGroup = primaryToolGroup ?? new ToolEnabledGroup();
82
- }
83
-
84
- // Add a tool that acts like one of the primary tools (only one primary tool can be enabled at a time).
85
- // This should be called before creating the app's toolbar.
86
- public addPrimaryTool(tool: BaseTool) {
87
- tool.setToolGroup(this.primaryToolGroup);
88
- if (tool.isEnabled()) {
89
- this.primaryToolGroup.notifyEnabled(tool);
90
- }
91
-
92
- this.addTool(tool);
93
- }
94
-
95
- public getPrimaryTools(): BaseTool[] {
96
- return this.tools.filter(tool => {
97
- return tool.getToolGroup() === this.primaryToolGroup;
98
- });
99
- }
100
-
101
- // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
102
- // This should be called before creating the app's toolbar.
103
- public addTool(tool: BaseTool) {
104
- this.tools.push(tool);
105
- }
106
-
107
- // Returns true if the event was handled
108
- public dispatchInputEvent(event: InputEvt): boolean {
109
- let handled = false;
110
- if (event.kind === InputEvtType.PointerDownEvt) {
111
- for (const tool of this.tools) {
112
- if (tool.isEnabled() && tool.onPointerDown(event)) {
113
- if (this.activeTool !== tool) {
114
- this.activeTool?.onGestureCancel();
115
- }
116
-
117
- this.activeTool = tool;
118
- handled = true;
119
- break;
120
- }
121
- }
122
- } else if (event.kind === InputEvtType.PointerUpEvt) {
123
- this.activeTool?.onPointerUp(event);
124
- this.activeTool = null;
125
- handled = true;
126
- } else if (event.kind === InputEvtType.PointerMoveEvt) {
127
- if (this.activeTool !== null) {
128
- this.activeTool.onPointerMove(event);
129
- handled = true;
130
- }
131
- } else if (event.kind === InputEvtType.GestureCancelEvt) {
132
- if (this.activeTool !== null) {
133
- this.activeTool.onGestureCancel();
134
- this.activeTool = null;
135
- }
136
- } else {
137
- let allCasesHandledGuard: never;
138
-
139
- for (const tool of this.tools) {
140
- if (!tool.isEnabled()) {
141
- continue;
142
- }
143
-
144
- switch (event.kind) {
145
- case InputEvtType.KeyPressEvent:
146
- handled = tool.onKeyPress(event);
147
- break;
148
- case InputEvtType.KeyUpEvent:
149
- handled = tool.onKeyUp(event);
150
- break;
151
- case InputEvtType.WheelEvt:
152
- handled = tool.onWheel(event);
153
- break;
154
- case InputEvtType.CopyEvent:
155
- handled = tool.onCopy(event);
156
- break;
157
- case InputEvtType.PasteEvent:
158
- handled = tool.onPaste(event);
159
- break;
160
- default:
161
- allCasesHandledGuard = event;
162
- return allCasesHandledGuard;
163
- }
164
-
165
- if (handled) {
166
- break;
167
- }
168
- }
169
- }
170
-
171
- return handled;
172
- }
173
-
174
- public getMatchingTools<Type extends BaseTool>(type: new (...args: any[])=>Type): Type[] {
175
- return this.tools.filter(tool => tool instanceof type) as Type[];
176
- }
177
- }
178
-
@@ -1,14 +0,0 @@
1
- import BaseTool from './BaseTool';
2
-
3
- // Connects a group of tools -- at most one tool in the group can be enabled.
4
- export default class ToolEnabledGroup {
5
- private activeTool: BaseTool|null;
6
- public constructor() { }
7
-
8
- public notifyEnabled(tool: BaseTool) {
9
- if (tool !== this.activeTool) {
10
- this.activeTool?.setEnabled(false);
11
- this.activeTool = tool;
12
- }
13
- }
14
- }
@@ -1,39 +0,0 @@
1
- import Editor from '../Editor';
2
- import { KeyPressEvent } from '../types';
3
- import BaseTool from './BaseTool';
4
-
5
- /**
6
- * Handles keyboard events used, by default, to select tools. By default,
7
- * 1 maps to the first primary tool, 2 to the second primary tool, ... .
8
- *
9
- * This is in the default set of {@link ToolController} tools.
10
- *
11
- * @deprecated This may be replaced in the future.
12
- */
13
- export default class ToolSwitcherShortcut extends BaseTool {
14
- public constructor(private editor: Editor) {
15
- super(editor.notifier, editor.localization.changeTool);
16
- }
17
-
18
- // @internal
19
- public onKeyPress({ key }: KeyPressEvent): boolean {
20
- const toolController = this.editor.toolController;
21
- const primaryTools = toolController.getPrimaryTools();
22
-
23
- // Map keys 0-9 to primary tools.
24
- const keyMatch = /^[0-9]$/.exec(key);
25
-
26
- let targetTool: BaseTool|undefined;
27
- if (keyMatch) {
28
- const targetIdx = parseInt(keyMatch[0], 10) - 1;
29
- targetTool = primaryTools[targetIdx];
30
- }
31
-
32
- if (targetTool) {
33
- targetTool.setEnabled(true);
34
- return true;
35
- }
36
-
37
- return false;
38
- }
39
- }
@@ -1,34 +0,0 @@
1
- // Allows the toolbar to register keyboard events.
2
- // @packageDocumentation
3
-
4
- import Editor from '../Editor';
5
- import { KeyPressEvent } from '../types';
6
- import BaseTool from './BaseTool';
7
-
8
- // Returns true if the event was handled, false otherwise.
9
- type KeyPressListener = (event: KeyPressEvent)=>boolean;
10
-
11
- export default class ToolbarShortcutHandler extends BaseTool {
12
- private listeners: Set<KeyPressListener> = new Set([]);
13
- public constructor(editor: Editor) {
14
- super(editor.notifier, editor.localization.changeTool);
15
- }
16
-
17
- public registerListener(listener: KeyPressListener) {
18
- this.listeners.add(listener);
19
- }
20
-
21
- public removeListener(listener: KeyPressListener) {
22
- this.listeners.delete(listener);
23
- }
24
-
25
- public onKeyPress(event: KeyPressEvent): boolean {
26
- for (const listener of this.listeners) {
27
- if (listener(event)) {
28
- return true;
29
- }
30
- }
31
-
32
- return false;
33
- }
34
- }
@@ -1,56 +0,0 @@
1
- /* @jest-environment jsdom */
2
-
3
- import Color4 from '../Color4';
4
- import Stroke from '../components/Stroke';
5
- import EditorImage from '../EditorImage';
6
- import Path from '../math/Path';
7
- import createEditor from '../testing/createEditor';
8
- import { InputEvtType } from '../types';
9
-
10
- describe('UndoRedoShortcut', () => {
11
- const testStroke = new Stroke([Path.fromString('M0,0L10,10').toRenderable({ fill: Color4.red })]);
12
- const addTestStrokeCommand = EditorImage.addElement(testStroke);
13
-
14
- it('ctrl+z should undo', () => {
15
- const editor = createEditor();
16
- editor.dispatch(addTestStrokeCommand);
17
- expect(editor.history.undoStackSize).toBe(1);
18
-
19
- editor.toolController.dispatchInputEvent({
20
- kind: InputEvtType.KeyPressEvent,
21
- ctrlKey: true,
22
- altKey: false,
23
- key: 'z',
24
- });
25
-
26
- expect(editor.history.undoStackSize).toBe(0);
27
- expect(editor.history.redoStackSize).toBe(1);
28
- });
29
-
30
- it('ctrl+shift+Z should re-do', () => {
31
- const editor = createEditor();
32
- editor.dispatch(addTestStrokeCommand);
33
- editor.dispatch(addTestStrokeCommand);
34
- expect(editor.history.undoStackSize).toBe(2);
35
-
36
- editor.toolController.dispatchInputEvent({
37
- kind: InputEvtType.KeyPressEvent,
38
- ctrlKey: true,
39
- altKey: false,
40
- key: 'z',
41
- });
42
-
43
- expect(editor.history.undoStackSize).toBe(1);
44
- expect(editor.history.redoStackSize).toBe(1);
45
-
46
- editor.toolController.dispatchInputEvent({
47
- kind: InputEvtType.KeyPressEvent,
48
- ctrlKey: true,
49
- altKey: false,
50
- key: 'Z',
51
- });
52
-
53
- expect(editor.history.undoStackSize).toBe(2);
54
- expect(editor.history.redoStackSize).toBe(0);
55
- });
56
- });
@@ -1,25 +0,0 @@
1
- import Editor from '../Editor';
2
- import { KeyPressEvent } from '../types';
3
- import BaseTool from './BaseTool';
4
-
5
- // Handles ctrl+Z, ctrl+Shift+Z keyboard shortcuts.
6
- export default class UndoRedoShortcut extends BaseTool {
7
- public constructor(private editor: Editor) {
8
- super(editor.notifier, editor.localization.undoRedoTool);
9
- }
10
-
11
- // @internal
12
- public onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean {
13
- if (ctrlKey) {
14
- if (key === 'z') {
15
- this.editor.history.undo();
16
- return true;
17
- } else if (key === 'Z') {
18
- this.editor.history.redo();
19
- return true;
20
- }
21
- }
22
-
23
- return false;
24
- }
25
- }
package/src/tools/lib.ts DELETED
@@ -1,21 +0,0 @@
1
-
2
- /**
3
- * @packageDocumentation
4
- */
5
-
6
- export { default as BaseTool } from './BaseTool';
7
- export { default as ToolController } from './ToolController';
8
- export { default as ToolEnabledGroup } from './ToolEnabledGroup';
9
-
10
- export { default as UndoRedoShortcut } from './UndoRedoShortcut';
11
- export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
12
- export { default as PanZoomTool, PanZoomMode } from './PanZoom';
13
-
14
- export { default as PenTool, PenStyle } from './Pen';
15
- export { default as TextTool } from './TextTool';
16
- export { default as SelectionTool } from './SelectionTool/SelectionTool';
17
- export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
18
- export { default as EraserTool } from './Eraser';
19
- export { default as PasteHandler } from './PasteHandler';
20
-
21
- export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';