js-draw 0.18.2 → 0.20.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 (269) hide show
  1. package/.eslintrc.js +1 -0
  2. package/CHANGELOG.md +10 -0
  3. package/dist/bundle.js +2 -2
  4. package/dist/bundledStyles.js +1 -0
  5. package/dist/cjs/src/Color4.d.ts +8 -0
  6. package/dist/cjs/src/Color4.js +67 -0
  7. package/dist/cjs/src/Editor.d.ts +2 -2
  8. package/dist/cjs/src/Editor.js +7 -7
  9. package/dist/cjs/src/SVGLoader.js +77 -12
  10. package/dist/cjs/src/Viewport.d.ts +2 -0
  11. package/dist/cjs/src/Viewport.js +6 -2
  12. package/dist/cjs/src/components/AbstractComponent.d.ts +2 -2
  13. package/dist/cjs/src/components/AbstractComponent.js +3 -3
  14. package/dist/cjs/src/components/{ImageBackground.d.ts → BackgroundComponent.d.ts} +23 -3
  15. package/dist/cjs/src/components/BackgroundComponent.js +309 -0
  16. package/dist/cjs/src/components/RestylableComponent.d.ts +21 -2
  17. package/dist/cjs/src/components/Stroke.d.ts +35 -0
  18. package/dist/cjs/src/components/Stroke.js +37 -3
  19. package/dist/cjs/src/components/TextComponent.d.ts +27 -17
  20. package/dist/cjs/src/components/TextComponent.js +23 -1
  21. package/dist/cjs/src/components/lib.d.ts +4 -3
  22. package/dist/cjs/src/components/lib.js +2 -2
  23. package/dist/cjs/src/components/util/StrokeSmoother.js +25 -15
  24. package/dist/cjs/src/lib.d.ts +30 -0
  25. package/dist/cjs/src/lib.js +30 -0
  26. package/dist/cjs/src/localizations/de.js +1 -1
  27. package/dist/cjs/src/localizations/es.js +1 -1
  28. package/dist/cjs/src/math/Path.js +1 -1
  29. package/dist/cjs/src/math/polynomial/QuadraticBezier.d.ts +28 -0
  30. package/dist/cjs/src/math/polynomial/QuadraticBezier.js +115 -0
  31. package/dist/cjs/src/math/polynomial/solveQuadratic.d.ts +6 -0
  32. package/dist/cjs/src/math/polynomial/solveQuadratic.js +36 -0
  33. package/dist/cjs/src/rendering/RenderingStyle.d.ts +4 -4
  34. package/dist/cjs/src/rendering/TextRenderingStyle.d.ts +10 -10
  35. package/dist/cjs/src/rendering/lib.d.ts +2 -0
  36. package/dist/cjs/src/rendering/renderers/AbstractRenderer.d.ts +2 -2
  37. package/dist/cjs/src/rendering/renderers/CanvasRenderer.d.ts +2 -2
  38. package/dist/cjs/src/rendering/renderers/CanvasRenderer.js +5 -3
  39. package/dist/cjs/src/rendering/renderers/DummyRenderer.d.ts +2 -2
  40. package/dist/cjs/src/rendering/renderers/SVGRenderer.d.ts +2 -2
  41. package/dist/cjs/src/rendering/renderers/SVGRenderer.js +15 -6
  42. package/dist/cjs/src/rendering/renderers/TextOnlyRenderer.d.ts +2 -2
  43. package/dist/cjs/src/toolbar/IconProvider.d.ts +2 -2
  44. package/dist/cjs/src/toolbar/localization.d.ts +2 -1
  45. package/dist/cjs/src/toolbar/localization.js +3 -2
  46. package/dist/cjs/src/toolbar/widgets/BaseWidget.js +1 -1
  47. package/dist/cjs/src/toolbar/widgets/DocumentPropertiesWidget.d.ts +5 -0
  48. package/dist/cjs/src/toolbar/widgets/DocumentPropertiesWidget.js +77 -2
  49. package/dist/cjs/src/toolbar/widgets/PenToolWidget.js +1 -1
  50. package/dist/cjs/src/tools/FindTool.js +1 -1
  51. package/dist/cjs/src/tools/SoundUITool.d.ts +24 -0
  52. package/dist/cjs/src/tools/SoundUITool.js +164 -0
  53. package/dist/cjs/src/tools/TextTool.d.ts +2 -2
  54. package/dist/cjs/src/tools/ToolController.js +6 -1
  55. package/dist/cjs/src/tools/lib.d.ts +1 -0
  56. package/dist/cjs/src/tools/lib.js +3 -1
  57. package/dist/cjs/src/tools/localization.d.ts +3 -0
  58. package/dist/cjs/src/tools/localization.js +3 -0
  59. package/dist/mjs/src/Color4.d.ts +8 -0
  60. package/dist/mjs/src/Color4.mjs +64 -0
  61. package/dist/mjs/src/Editor.d.ts +2 -2
  62. package/dist/mjs/src/Editor.mjs +6 -6
  63. package/dist/mjs/src/SVGLoader.mjs +76 -11
  64. package/dist/mjs/src/Viewport.d.ts +2 -0
  65. package/dist/mjs/src/Viewport.mjs +6 -2
  66. package/dist/mjs/src/components/AbstractComponent.d.ts +2 -2
  67. package/dist/mjs/src/components/AbstractComponent.mjs +3 -3
  68. package/dist/mjs/src/components/{ImageBackground.d.ts → BackgroundComponent.d.ts} +23 -3
  69. package/dist/mjs/src/components/BackgroundComponent.mjs +279 -0
  70. package/dist/mjs/src/components/RestylableComponent.d.ts +21 -2
  71. package/dist/mjs/src/components/Stroke.d.ts +35 -0
  72. package/dist/mjs/src/components/Stroke.mjs +37 -3
  73. package/dist/mjs/src/components/TextComponent.d.ts +27 -17
  74. package/dist/mjs/src/components/TextComponent.mjs +23 -1
  75. package/dist/mjs/src/components/lib.d.ts +4 -3
  76. package/dist/mjs/src/components/lib.mjs +2 -2
  77. package/dist/mjs/src/components/util/StrokeSmoother.mjs +25 -15
  78. package/dist/mjs/src/lib.d.ts +30 -0
  79. package/dist/mjs/src/lib.mjs +30 -0
  80. package/dist/mjs/src/localizations/de.mjs +1 -1
  81. package/dist/mjs/src/localizations/es.mjs +1 -1
  82. package/dist/mjs/src/math/Path.mjs +1 -1
  83. package/dist/mjs/src/math/polynomial/QuadraticBezier.d.ts +28 -0
  84. package/dist/mjs/src/math/polynomial/QuadraticBezier.mjs +109 -0
  85. package/dist/mjs/src/math/polynomial/solveQuadratic.d.ts +6 -0
  86. package/dist/mjs/src/math/polynomial/solveQuadratic.mjs +34 -0
  87. package/dist/mjs/src/rendering/RenderingStyle.d.ts +4 -4
  88. package/dist/mjs/src/rendering/TextRenderingStyle.d.ts +10 -10
  89. package/dist/mjs/src/rendering/lib.d.ts +2 -0
  90. package/dist/mjs/src/rendering/renderers/AbstractRenderer.d.ts +2 -2
  91. package/dist/mjs/src/rendering/renderers/CanvasRenderer.d.ts +2 -2
  92. package/dist/mjs/src/rendering/renderers/CanvasRenderer.mjs +5 -3
  93. package/dist/mjs/src/rendering/renderers/DummyRenderer.d.ts +2 -2
  94. package/dist/mjs/src/rendering/renderers/SVGRenderer.d.ts +2 -2
  95. package/dist/mjs/src/rendering/renderers/SVGRenderer.mjs +15 -6
  96. package/dist/mjs/src/rendering/renderers/TextOnlyRenderer.d.ts +2 -2
  97. package/dist/mjs/src/toolbar/IconProvider.d.ts +2 -2
  98. package/dist/mjs/src/toolbar/localization.d.ts +2 -1
  99. package/dist/mjs/src/toolbar/localization.mjs +3 -2
  100. package/dist/mjs/src/toolbar/widgets/BaseWidget.mjs +1 -1
  101. package/dist/mjs/src/toolbar/widgets/DocumentPropertiesWidget.d.ts +5 -0
  102. package/dist/mjs/src/toolbar/widgets/DocumentPropertiesWidget.mjs +54 -2
  103. package/dist/mjs/src/toolbar/widgets/PenToolWidget.mjs +1 -1
  104. package/dist/mjs/src/tools/FindTool.mjs +1 -1
  105. package/dist/mjs/src/tools/SoundUITool.d.ts +24 -0
  106. package/dist/mjs/src/tools/SoundUITool.mjs +158 -0
  107. package/dist/mjs/src/tools/TextTool.d.ts +2 -2
  108. package/dist/mjs/src/tools/ToolController.mjs +6 -1
  109. package/dist/mjs/src/tools/lib.d.ts +1 -0
  110. package/dist/mjs/src/tools/lib.mjs +1 -0
  111. package/dist/mjs/src/tools/localization.d.ts +3 -0
  112. package/dist/mjs/src/tools/localization.mjs +3 -0
  113. package/jest.config.js +1 -1
  114. package/package.json +19 -17
  115. package/src/Editor.css +2 -2
  116. package/src/tools/SoundUITool.css +15 -0
  117. package/src/tools/tools.css +4 -0
  118. package/dist/cjs/src/components/ImageBackground.js +0 -146
  119. package/dist/mjs/src/components/ImageBackground.mjs +0 -139
  120. package/src/Color4.test.ts +0 -40
  121. package/src/Color4.ts +0 -236
  122. package/src/Editor.loadFrom.test.ts +0 -24
  123. package/src/Editor.toSVG.test.ts +0 -111
  124. package/src/Editor.ts +0 -1122
  125. package/src/EditorImage.test.ts +0 -120
  126. package/src/EditorImage.ts +0 -603
  127. package/src/EventDispatcher.test.ts +0 -123
  128. package/src/EventDispatcher.ts +0 -71
  129. package/src/Pointer.ts +0 -127
  130. package/src/SVGLoader.test.ts +0 -114
  131. package/src/SVGLoader.ts +0 -511
  132. package/src/UndoRedoHistory.test.ts +0 -33
  133. package/src/UndoRedoHistory.ts +0 -102
  134. package/src/Viewport.ts +0 -319
  135. package/src/bundle/bundled.ts +0 -7
  136. package/src/commands/Command.ts +0 -45
  137. package/src/commands/Duplicate.ts +0 -48
  138. package/src/commands/Erase.ts +0 -74
  139. package/src/commands/SerializableCommand.ts +0 -49
  140. package/src/commands/UnresolvedCommand.ts +0 -37
  141. package/src/commands/invertCommand.ts +0 -51
  142. package/src/commands/lib.ts +0 -16
  143. package/src/commands/localization.ts +0 -47
  144. package/src/commands/uniteCommands.test.ts +0 -23
  145. package/src/commands/uniteCommands.ts +0 -135
  146. package/src/components/AbstractComponent.transformBy.test.ts +0 -22
  147. package/src/components/AbstractComponent.ts +0 -364
  148. package/src/components/ImageBackground.test.ts +0 -35
  149. package/src/components/ImageBackground.ts +0 -176
  150. package/src/components/ImageComponent.ts +0 -171
  151. package/src/components/RestylableComponent.ts +0 -142
  152. package/src/components/SVGGlobalAttributesObject.ts +0 -81
  153. package/src/components/Stroke.test.ts +0 -139
  154. package/src/components/Stroke.ts +0 -245
  155. package/src/components/TextComponent.test.ts +0 -99
  156. package/src/components/TextComponent.ts +0 -315
  157. package/src/components/UnknownSVGObject.test.ts +0 -10
  158. package/src/components/UnknownSVGObject.ts +0 -60
  159. package/src/components/builders/ArrowBuilder.ts +0 -107
  160. package/src/components/builders/FreehandLineBuilder.ts +0 -212
  161. package/src/components/builders/LineBuilder.ts +0 -77
  162. package/src/components/builders/PressureSensitiveFreehandLineBuilder.ts +0 -454
  163. package/src/components/builders/RectangleBuilder.ts +0 -74
  164. package/src/components/builders/types.ts +0 -15
  165. package/src/components/lib.ts +0 -25
  166. package/src/components/localization.ts +0 -22
  167. package/src/components/util/StrokeSmoother.ts +0 -293
  168. package/src/components/util/describeComponentList.ts +0 -18
  169. package/src/lib.ts +0 -37
  170. package/src/localization.ts +0 -34
  171. package/src/localizations/de.ts +0 -98
  172. package/src/localizations/en.ts +0 -8
  173. package/src/localizations/es.ts +0 -74
  174. package/src/localizations/getLocalizationTable.test.ts +0 -27
  175. package/src/localizations/getLocalizationTable.ts +0 -55
  176. package/src/math/LineSegment2.test.ts +0 -99
  177. package/src/math/LineSegment2.ts +0 -160
  178. package/src/math/Mat33.test.ts +0 -244
  179. package/src/math/Mat33.ts +0 -437
  180. package/src/math/Path.fromString.test.ts +0 -223
  181. package/src/math/Path.test.ts +0 -198
  182. package/src/math/Path.toString.test.ts +0 -77
  183. package/src/math/Path.ts +0 -790
  184. package/src/math/Rect2.test.ts +0 -204
  185. package/src/math/Rect2.ts +0 -315
  186. package/src/math/Triangle.ts +0 -29
  187. package/src/math/Vec2.test.ts +0 -30
  188. package/src/math/Vec2.ts +0 -18
  189. package/src/math/Vec3.test.ts +0 -44
  190. package/src/math/Vec3.ts +0 -218
  191. package/src/math/lib.ts +0 -15
  192. package/src/math/rounding.test.ts +0 -65
  193. package/src/math/rounding.ts +0 -156
  194. package/src/rendering/Display.ts +0 -249
  195. package/src/rendering/RenderingStyle.test.ts +0 -68
  196. package/src/rendering/RenderingStyle.ts +0 -55
  197. package/src/rendering/TextRenderingStyle.ts +0 -45
  198. package/src/rendering/caching/CacheRecord.test.ts +0 -49
  199. package/src/rendering/caching/CacheRecord.ts +0 -77
  200. package/src/rendering/caching/CacheRecordManager.ts +0 -71
  201. package/src/rendering/caching/RenderingCache.test.ts +0 -44
  202. package/src/rendering/caching/RenderingCache.ts +0 -66
  203. package/src/rendering/caching/RenderingCacheNode.ts +0 -405
  204. package/src/rendering/caching/testUtils.ts +0 -35
  205. package/src/rendering/caching/types.ts +0 -34
  206. package/src/rendering/lib.ts +0 -6
  207. package/src/rendering/localization.ts +0 -20
  208. package/src/rendering/renderers/AbstractRenderer.ts +0 -222
  209. package/src/rendering/renderers/CanvasRenderer.ts +0 -296
  210. package/src/rendering/renderers/DummyRenderer.test.ts +0 -42
  211. package/src/rendering/renderers/DummyRenderer.ts +0 -136
  212. package/src/rendering/renderers/SVGRenderer.ts +0 -354
  213. package/src/rendering/renderers/TextOnlyRenderer.ts +0 -70
  214. package/src/testing/beforeEachFile.ts +0 -8
  215. package/src/testing/createEditor.ts +0 -11
  216. package/src/testing/global.d.ts +0 -17
  217. package/src/testing/lib.ts +0 -3
  218. package/src/testing/loadExpectExtensions.ts +0 -25
  219. package/src/testing/sendPenEvent.ts +0 -31
  220. package/src/testing/sendTouchEvent.ts +0 -78
  221. package/src/toolbar/HTMLToolbar.ts +0 -492
  222. package/src/toolbar/IconProvider.ts +0 -736
  223. package/src/toolbar/lib.ts +0 -4
  224. package/src/toolbar/localization.ts +0 -106
  225. package/src/toolbar/makeColorInput.ts +0 -145
  226. package/src/toolbar/types.ts +0 -5
  227. package/src/toolbar/widgets/ActionButtonWidget.ts +0 -39
  228. package/src/toolbar/widgets/BaseToolWidget.ts +0 -56
  229. package/src/toolbar/widgets/BaseWidget.ts +0 -377
  230. package/src/toolbar/widgets/DocumentPropertiesWidget.ts +0 -167
  231. package/src/toolbar/widgets/EraserToolWidget.ts +0 -85
  232. package/src/toolbar/widgets/HandToolWidget.ts +0 -250
  233. package/src/toolbar/widgets/InsertImageWidget.ts +0 -223
  234. package/src/toolbar/widgets/OverflowWidget.ts +0 -92
  235. package/src/toolbar/widgets/PenToolWidget.ts +0 -288
  236. package/src/toolbar/widgets/SelectionToolWidget.ts +0 -190
  237. package/src/toolbar/widgets/TextToolWidget.ts +0 -145
  238. package/src/toolbar/widgets/lib.ts +0 -13
  239. package/src/tools/BaseTool.ts +0 -76
  240. package/src/tools/Eraser.test.ts +0 -103
  241. package/src/tools/Eraser.ts +0 -139
  242. package/src/tools/FindTool.ts +0 -152
  243. package/src/tools/PanZoom.test.ts +0 -310
  244. package/src/tools/PanZoom.ts +0 -520
  245. package/src/tools/PasteHandler.ts +0 -95
  246. package/src/tools/Pen.test.ts +0 -194
  247. package/src/tools/Pen.ts +0 -226
  248. package/src/tools/PipetteTool.ts +0 -55
  249. package/src/tools/SelectionTool/SelectAllShortcutHandler.ts +0 -28
  250. package/src/tools/SelectionTool/Selection.ts +0 -607
  251. package/src/tools/SelectionTool/SelectionHandle.ts +0 -108
  252. package/src/tools/SelectionTool/SelectionTool.test.ts +0 -261
  253. package/src/tools/SelectionTool/SelectionTool.ts +0 -480
  254. package/src/tools/SelectionTool/TransformMode.ts +0 -114
  255. package/src/tools/SelectionTool/types.ts +0 -11
  256. package/src/tools/TextTool.ts +0 -326
  257. package/src/tools/ToolController.ts +0 -178
  258. package/src/tools/ToolEnabledGroup.ts +0 -14
  259. package/src/tools/ToolSwitcherShortcut.ts +0 -39
  260. package/src/tools/ToolbarShortcutHandler.ts +0 -34
  261. package/src/tools/UndoRedoShortcut.test.ts +0 -56
  262. package/src/tools/UndoRedoShortcut.ts +0 -25
  263. package/src/tools/lib.ts +0 -21
  264. package/src/tools/localization.ts +0 -66
  265. package/src/types.ts +0 -234
  266. package/src/util/assertions.ts +0 -55
  267. package/src/util/fileToBase64.ts +0 -18
  268. package/src/util/untilNextAnimationFrame.ts +0 -9
  269. package/src/util/waitForTimeout.ts +0 -9
@@ -1,293 +0,0 @@
1
- import { Bezier } from 'bezier-js';
2
- import { Point2, Vec2 } from '../../math/Vec2';
3
- import Rect2 from '../../math/Rect2';
4
- import LineSegment2 from '../../math/LineSegment2';
5
- import { StrokeDataPoint } from '../../types';
6
-
7
- export interface Curve {
8
- startPoint: Vec2;
9
- startWidth: number;
10
-
11
- controlPoint: Vec2;
12
-
13
- endWidth: number;
14
- endPoint: Vec2;
15
- }
16
-
17
- type OnCurveAddedCallback = (curve: Curve|null)=>void;
18
-
19
- // Handles stroke smoothing
20
- export class StrokeSmoother {
21
- private isFirstSegment: boolean = true;
22
-
23
- private buffer: Point2[];
24
- private lastPoint: StrokeDataPoint;
25
- private lastExitingVec: Vec2|null = null;
26
- private currentCurve: Bezier|null = null;
27
- private curveStartWidth: number;
28
- private curveEndWidth: number;
29
-
30
- // Stroke smoothing and tangent approximation
31
- private momentum: Vec2;
32
- private bbox: Rect2;
33
-
34
- public constructor(
35
- private startPoint: StrokeDataPoint,
36
-
37
- // Maximum distance from the actual curve (irrespective of stroke width)
38
- // for which a point is considered 'part of the curve'.
39
- // Note that the maximum will be smaller if the stroke width is less than
40
- // [maxFitAllowed].
41
- private minFitAllowed: number,
42
- private maxFitAllowed: number,
43
-
44
- private onCurveAdded: OnCurveAddedCallback,
45
- ) {
46
- this.lastPoint = this.startPoint;
47
-
48
- this.buffer = [this.startPoint.pos];
49
- this.momentum = Vec2.zero;
50
- this.currentCurve = null;
51
- this.curveStartWidth = startPoint.width;
52
-
53
- this.bbox = new Rect2(this.startPoint.pos.x, this.startPoint.pos.y, 0, 0);
54
- }
55
-
56
- public getBBox(): Rect2 {
57
- return this.bbox;
58
- }
59
-
60
- public preview(): Curve|null {
61
- if (!this.currentCurve) {
62
- return null;
63
- }
64
-
65
- return this.currentSegmentToPath();
66
- }
67
-
68
- // Returns the distance between the start, control, and end points of the curve.
69
- private approxCurrentCurveLength() {
70
- if (!this.currentCurve) {
71
- return 0;
72
- }
73
- const startPt = Vec2.ofXY(this.currentCurve.points[0]);
74
- const controlPt = Vec2.ofXY(this.currentCurve.points[1]);
75
- const endPt = Vec2.ofXY(this.currentCurve.points[2]);
76
- const toControlDist = startPt.minus(controlPt).length();
77
- const toEndDist = endPt.minus(controlPt).length();
78
- return toControlDist + toEndDist;
79
- }
80
-
81
- public finalizeCurrentCurve() {
82
- // Case where no points have been added
83
- if (!this.currentCurve) {
84
- return;
85
- }
86
-
87
- this.onCurveAdded(this.currentSegmentToPath());
88
-
89
- const lastPoint = this.buffer[this.buffer.length - 1];
90
- this.lastExitingVec = Vec2.ofXY(
91
- this.currentCurve.points[2]
92
- ).minus(Vec2.ofXY(this.currentCurve.points[1]));
93
- console.assert(this.lastExitingVec.magnitude() !== 0, 'lastExitingVec has zero length!');
94
-
95
- // Use the last two points to start a new curve (the last point isn't used
96
- // in the current curve and we want connected curves to share end points)
97
- this.buffer = [
98
- this.buffer[this.buffer.length - 2], lastPoint,
99
- ];
100
- this.currentCurve = null;
101
-
102
- this.isFirstSegment = false;
103
- }
104
-
105
- // Returns [upper curve, connector, lower curve]
106
- private currentSegmentToPath() {
107
- if (this.currentCurve == null) {
108
- throw new Error('Invalid State: currentCurve is null!');
109
- }
110
-
111
- const startVec = Vec2.ofXY(this.currentCurve.normal(0)).normalized();
112
-
113
- if (!isFinite(startVec.magnitude())) {
114
- throw new Error(`startVec(${startVec}) is NaN or ∞`);
115
- }
116
-
117
- const startPt = Vec2.ofXY(this.currentCurve.get(0));
118
- const endPt = Vec2.ofXY(this.currentCurve.get(1));
119
- const controlPoint = Vec2.ofXY(this.currentCurve.points[1]);
120
-
121
- return {
122
- startPoint: startPt,
123
- controlPoint,
124
- endPoint: endPt,
125
- startWidth: this.curveStartWidth,
126
- endWidth: this.curveEndWidth,
127
- };
128
- }
129
-
130
- // Compute the direction of the velocity at the end of this.buffer
131
- private computeExitingVec(): Vec2 {
132
- return this.momentum.normalized().times(this.lastPoint.width / 2);
133
- }
134
-
135
- public addPoint(newPoint: StrokeDataPoint) {
136
- if (this.lastPoint) {
137
- // Ignore points that are identical
138
- const fuzzEq = 1e-10;
139
- const deltaTime = newPoint.time - this.lastPoint.time;
140
- if (newPoint.pos.eq(this.lastPoint.pos, fuzzEq) || deltaTime === 0) {
141
- return;
142
- } else if (isNaN(newPoint.pos.magnitude())) {
143
- console.warn('Discarding NaN point.', newPoint);
144
- return;
145
- }
146
-
147
- const threshold = Math.min(this.lastPoint.width, newPoint.width) / 3;
148
- const shouldSnapToInitial = this.startPoint.pos.minus(newPoint.pos).magnitude() < threshold
149
- && this.isFirstSegment;
150
-
151
- // Snap to the starting point if the stroke is contained within a small ball centered
152
- // at the starting point.
153
- // This allows us to create a circle/dot at the start of the stroke.
154
- if (shouldSnapToInitial) {
155
- return;
156
- }
157
-
158
- const velocity = newPoint.pos.minus(this.lastPoint.pos).times(1 / (deltaTime) * 1000);
159
- this.momentum = this.momentum.lerp(velocity, 0.9);
160
- }
161
-
162
- const lastPoint = this.lastPoint ?? newPoint;
163
- this.lastPoint = newPoint;
164
-
165
- this.buffer.push(newPoint.pos);
166
- const pointRadius = newPoint.width;
167
- const prevEndWidth = this.curveEndWidth;
168
- this.curveEndWidth = pointRadius;
169
-
170
- // recompute bbox
171
- this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
172
-
173
- // If the last curve just ended or it's the first curve,
174
- if (this.currentCurve === null) {
175
- const p1 = lastPoint.pos;
176
- const p2 = lastPoint.pos.plus(this.lastExitingVec ?? Vec2.unitX);
177
- const p3 = newPoint.pos;
178
-
179
- // Quadratic Bézier curve
180
- this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
181
- console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
182
-
183
- if (this.isFirstSegment) {
184
- // The start of a curve often lacks accurate pressure information. Update it.
185
- this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
186
- }
187
- else {
188
- this.curveStartWidth = prevEndWidth;
189
- }
190
- }
191
-
192
- // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
193
- let enteringVec = this.lastExitingVec;
194
- if (!enteringVec) {
195
- let sampleIdx = Math.ceil(this.buffer.length / 2);
196
- if (sampleIdx === 0 || sampleIdx >= this.buffer.length) {
197
- sampleIdx = this.buffer.length - 1;
198
- }
199
-
200
- enteringVec = this.buffer[sampleIdx].minus(this.buffer[0]);
201
- }
202
-
203
- let exitingVec = this.computeExitingVec();
204
-
205
- // Find the intersection between the entering vector and the exiting vector
206
- const maxRelativeLength = 2.2;
207
- const segmentStart = this.buffer[0];
208
- const segmentEnd = newPoint.pos;
209
- const startEndDist = segmentEnd.minus(segmentStart).magnitude();
210
- const maxControlPointDist = maxRelativeLength * startEndDist;
211
-
212
- // Exit in cases where we would divide by zero
213
- if (maxControlPointDist === 0 || exitingVec.magnitude() === 0 || !isFinite(exitingVec.magnitude())) {
214
- return;
215
- }
216
-
217
- console.assert(isFinite(enteringVec.magnitude()), 'Pre-normalized enteringVec has NaN or ∞ magnitude!');
218
-
219
- enteringVec = enteringVec.normalized();
220
- exitingVec = exitingVec.normalized();
221
-
222
- console.assert(isFinite(enteringVec.magnitude()), 'Normalized enteringVec has NaN or ∞ magnitude!');
223
-
224
- const lineFromStart = new LineSegment2(
225
- segmentStart,
226
- segmentStart.plus(enteringVec.times(maxControlPointDist))
227
- );
228
- const lineFromEnd = new LineSegment2(
229
- segmentEnd.minus(exitingVec.times(maxControlPointDist)),
230
- segmentEnd
231
- );
232
- const intersection = lineFromEnd.intersection(lineFromStart);
233
-
234
- // Position the control point at this intersection
235
- let controlPoint: Point2|null = null;
236
- if (intersection) {
237
- controlPoint = intersection.point;
238
- }
239
-
240
- // No intersection or the intersection is one of the end points?
241
- if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
242
- // Position the control point closer to the first -- the connecting
243
- // segment will be roughly a line.
244
- controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
245
- }
246
-
247
- console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
248
- console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');
249
-
250
- const prevCurve = this.currentCurve;
251
- this.currentCurve = new Bezier(segmentStart.xy, controlPoint.xy, segmentEnd.xy);
252
-
253
- if (isNaN(Vec2.ofXY(this.currentCurve.normal(0)).magnitude())) {
254
- console.error('NaN normal at 0. Curve:', this.currentCurve);
255
- this.currentCurve = prevCurve;
256
- }
257
-
258
- // Should we start making a new curve? Check whether all buffer points are within
259
- // ±strokeWidth of the curve.
260
- const curveMatchesPoints = (curve: Bezier): boolean => {
261
- for (const point of this.buffer) {
262
- const proj =
263
- Vec2.ofXY(curve.project(point.xy));
264
- const dist = proj.minus(point).magnitude();
265
-
266
- const minFit = Math.max(
267
- Math.min(this.curveStartWidth, this.curveEndWidth) / 3,
268
- this.minFitAllowed
269
- );
270
- if (dist > minFit || dist > this.maxFitAllowed) {
271
- return false;
272
- }
273
- }
274
- return true;
275
- };
276
-
277
- if (this.buffer.length > 3 && this.approxCurrentCurveLength() > this.curveStartWidth / 2) {
278
- if (!curveMatchesPoints(this.currentCurve)) {
279
- // Use a curve that better fits the points
280
- this.currentCurve = prevCurve;
281
- this.curveEndWidth = prevEndWidth;
282
-
283
- // Reset the last point -- the current point was not added to the curve.
284
- this.lastPoint = lastPoint;
285
-
286
- this.finalizeCurrentCurve();
287
- return;
288
- }
289
- }
290
- }
291
- }
292
-
293
- export default StrokeSmoother;
@@ -1,18 +0,0 @@
1
- import AbstractComponent from '../AbstractComponent';
2
- import { ImageComponentLocalization } from '../localization';
3
-
4
- // Returns the description of all given elements, if identical, otherwise,
5
- // returns null.
6
- export default (localizationTable: ImageComponentLocalization, elems: AbstractComponent[]) => {
7
- if (elems.length === 0) {
8
- return null;
9
- }
10
-
11
- const description = elems[0].description(localizationTable);
12
- for (const elem of elems) {
13
- if (elem.description(localizationTable) !== description) {
14
- return null;
15
- }
16
- }
17
- return description;
18
- };
package/src/lib.ts DELETED
@@ -1,37 +0,0 @@
1
- /**
2
- * The main entrypoint for the NPM package. Everything exported by this file
3
- * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
4
- *
5
- * @example
6
- * ```
7
- * import { Editor, Vec3, Mat33 } from 'js-draw';
8
- * ```
9
- *
10
- * @see
11
- * {@link Editor}
12
- *
13
- * @packageDocumentation
14
- */
15
-
16
- import Editor, { EditorSettings } from './Editor';
17
- export { default as EditorImage } from './EditorImage';
18
- export * from './types';
19
- export { default as getLocalizationTable } from './localizations/getLocalizationTable';
20
- export * from './localization';
21
-
22
- export { default as Color4 } from './Color4';
23
- export { default as SVGLoader } from './SVGLoader';
24
- export { default as Viewport } from './Viewport';
25
- export * from './math/lib';
26
- export * from './components/lib';
27
- export * from './commands/lib';
28
- export * from './tools/lib';
29
- export * from './toolbar/lib';
30
- export * from './rendering/lib';
31
- export * from './testing/lib';
32
- export { default as Pointer, PointerDevice } from './Pointer';
33
- export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
34
- export { default as UndoRedoHistory } from './UndoRedoHistory';
35
-
36
- export { Editor, EditorSettings };
37
- export default Editor;
@@ -1,34 +0,0 @@
1
- import { CommandLocalization, defaultCommandLocalization } from './commands/localization';
2
- import { defaultComponentLocalization, ImageComponentLocalization } from './components/localization';
3
- import { defaultTextRendererLocalization, TextRendererLocalization } from './rendering/localization';
4
- import { defaultToolbarLocalization, ToolbarLocalization } from './toolbar/localization';
5
- import { defaultToolLocalization, ToolLocalization } from './tools/localization';
6
-
7
-
8
- export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization, TextRendererLocalization {
9
- accessibilityInputInstructions: string;
10
- undoAnnouncement: (actionDescription: string)=> string;
11
- redoAnnouncement: (actionDescription: string)=> string;
12
- doneLoading: string;
13
- loading: (percentage: number)=>string;
14
- imageEditor: string;
15
- }
16
-
17
- export const defaultEditorLocalization: EditorLocalization = {
18
- ...defaultToolbarLocalization,
19
- ...defaultToolLocalization,
20
- ...defaultCommandLocalization,
21
- ...defaultComponentLocalization,
22
- ...defaultTextRendererLocalization,
23
- accessibilityInputInstructions: [
24
- 'Press "t" to read the contents of the viewport as text.',
25
- 'Use the arrow keys to move the viewport, click and drag to draw strokes.',
26
- 'Press "w" to zoom in and "s" to zoom out.',
27
- ].join(' '),
28
- loading: (percentage: number) => `Loading ${percentage}%...`,
29
- imageEditor: 'Image Editor',
30
- doneLoading: 'Done loading',
31
-
32
- undoAnnouncement: (commandDescription: string) => `Undid ${commandDescription}`,
33
- redoAnnouncement: (commandDescription: string) => `Redid ${commandDescription}`,
34
- };
@@ -1,98 +0,0 @@
1
- import { defaultEditorLocalization, EditorLocalization } from '../localization';
2
-
3
- // German localization
4
- const localization: EditorLocalization = {
5
- ...defaultEditorLocalization,
6
-
7
- pen: 'Stift',
8
- eraser: 'Radierer',
9
- select: 'Auswahl',
10
- handTool: 'Verschieben',
11
-
12
- zoom: 'Vergrößerung',
13
- resetView: 'Ansicht zurücksetzen',
14
-
15
- thicknessLabel: 'Dicke: ',
16
- colorLabel: 'Farbe: ',
17
- fontLabel: 'Schriftart: ',
18
-
19
- resizeImageToSelection: 'Bildgröße an Auswahl anpassen',
20
- deleteSelection: 'Auswahl löschen',
21
- duplicateSelection: 'Auswahl duplizieren',
22
-
23
- undo: 'Rückgängig',
24
- redo: 'Wiederholen',
25
-
26
- pickColorFromScreen: 'Farbe von Bildschirm auswählen',
27
- clickToPickColorAnnouncement: 'Klicke auf den Bildschirm, um eine Farbe auszuwählen',
28
- selectionToolKeyboardShortcuts: 'Auswahl-Werkzeug: Verwende die Pfeiltasten, um ausgewählte Elemente zu verschieben und ‚i‘ und ‚o‘, um ihre Größe zu ändern.',
29
- touchPanning: 'Ansicht mit Touchscreen verschieben',
30
- anyDevicePanning: 'Ansicht mit jedem Eingabegerät verschieben',
31
-
32
- selectObjectType: 'Objekt-Typ: ',
33
- freehandPen: 'Freihand',
34
- arrowPen: 'Pfeil',
35
- linePen: 'Linie',
36
- outlinedRectanglePen: 'Umrissenes Rechteck',
37
- filledRectanglePen: 'Ausgefülltes Rechteck',
38
-
39
- dropdownShown: t=>`Dropdown-Menü für ${t} angezeigt`,
40
- dropdownHidden: t=>`Dropdown-Menü für ${t} versteckt`,
41
- zoomLevel: t=>`Vergößerung: ${t}%`,
42
- colorChangedAnnouncement: t=>`Farbe zu ${t} geändert`,
43
- penTool: t=>`Stift ${t}`,
44
-
45
- selectionTool: 'Auswahl',
46
- eraserTool: 'Radiergummi',
47
- touchPanTool: 'Ansicht mit Touchscreen verschieben',
48
- twoFingerPanZoomTool: 'Ansicht verschieben und vergrößern',
49
- undoRedoTool: 'Rückgängig/Wiederholen',
50
- rightClickDragPanTool: 'Rechtsklick-Ziehen',
51
- pipetteTool: 'Farbe von Bildschirm auswählen',
52
- keyboardPanZoom: 'Tastaturkürzel zum Verschieben/Vergrößern der Ansicht',
53
- textTool: 'Text',
54
- enterTextToInsert: 'Einzufügender Text',
55
-
56
- toolEnabledAnnouncement: t=>`${t} aktiviert`,
57
- toolDisabledAnnouncement: t=>`${t} deaktiviert`,
58
- updatedViewport: 'Transformierte Ansicht',
59
- transformedElements: t=>`${t} Element${1===t?'':'e'} transformiert`,
60
- resizeOutputCommand: t=>`Bildgröße auf ${t.w}x${t.h} geändert`,
61
- addElementAction: t=>`${t} hinzugefügt`,
62
- eraseAction: (t,e)=>`${e} ${t} gelöscht`,
63
- duplicateAction: (t,e)=>`${e} ${t} dupliziert`,
64
- inverseOf: t=>`Umkehrung von ${t}`,
65
-
66
- elements: 'Elemente',
67
- erasedNoElements: 'Nichts entfernt',
68
- duplicatedNoElements: 'Nichts dupliziert',
69
- rotatedBy: t=>`${Math.abs(t)} Grad ${t<0?'im Uhrzeigersinn':'gegen den Uhrzeigersinn'} gedreht`,
70
-
71
- movedLeft: 'Nacht links bewegt',
72
- movedUp: 'Nacht oben bewegt',
73
- movedDown: 'Nacht unten bewegt',
74
- movedRight: 'Nacht rechts bewegt',
75
- zoomedOut: 'Ansicht verkleinert',
76
- zoomedIn: 'Ansicht vergrößert',
77
-
78
- selectedElements: t=>`${t} Element${ 1===t ? '' : 'e' } ausgewählt`,
79
- stroke: 'Strich',
80
- svgObject: 'SVG-Objekt',
81
-
82
- text: t=>`Text-Objekt: ${t}`,
83
- pathNodeCount: t=>`Es gibt ${t} sichtbare Pfad-Objekte.`,
84
- textNodeCount: t=>`Es gibt ${t} sichtbare Text-Knotenpunkte.`,
85
- textNode: t=>`Text: ${t}`,
86
-
87
- rerenderAsText: 'Als Text darstellen',
88
- accessibilityInputInstructions: 'Drücke ‚t‘, um den Inhalt des Ansichtsfensters als Text zu lesen. Verwende die Pfeiltasten, um die Ansicht zu verschieben, und klicke und ziehe, um Striche zu zeichnen. Drücke ‚w‘ zum Vergrößern und ‚s‘ zum Verkleinern der Ansicht.',
89
-
90
- loading: t=>`Laden ${t}%...`,
91
- doneLoading: 'Laden fertig',
92
-
93
- imageEditor: 'Bild-Editor',
94
- undoAnnouncement: t=>`Rückgangig gemacht ${t}`,
95
- redoAnnouncement: t=>`Wiederholt ${t}`,
96
- };
97
-
98
- export default localization;
@@ -1,8 +0,0 @@
1
- import { defaultEditorLocalization, EditorLocalization } from '../localization';
2
-
3
- // Default localizations are already in English.
4
- const localization: EditorLocalization = {
5
- ...defaultEditorLocalization,
6
- };
7
-
8
- export default localization;
@@ -1,74 +0,0 @@
1
- import { defaultEditorLocalization, EditorLocalization } from '../localization';
2
-
3
- // A partial Spanish localization.
4
- const localization: EditorLocalization = {
5
- ...defaultEditorLocalization,
6
-
7
- // Strings for the main editor interface
8
- // (see src/localization.ts)
9
- loading: (percentage: number) => `Cargando: ${percentage}%...`,
10
- imageEditor: 'Editor de dibujos',
11
-
12
- undoAnnouncement: (commandDescription: string) => `${commandDescription} fue deshecho`,
13
- redoAnnouncement: (commandDescription: string) => `${commandDescription} fue rehecho`,
14
- undo: 'Deshace',
15
- redo: 'Rehace',
16
-
17
- // Strings for the toolbar
18
- // (see src/toolbar/localization.ts)
19
- pen: 'Lapiz',
20
- eraser: 'Borrador',
21
- select: 'Selecciona',
22
- thicknessLabel: 'Tamaño: ',
23
- colorLabel: 'Color: ',
24
- doneLoading: 'El cargado terminó',
25
- fontLabel: 'Fuente: ',
26
- anyDevicePanning: 'Mover la pantalla con todo dispotivo',
27
- touchPanning: 'Mover la pantalla con un dedo',
28
- touchPanTool: 'Instrumento de mover la pantalla con un dedo',
29
- outlinedRectanglePen: 'Rectángulo con nada más que un borde',
30
- filledRectanglePen: 'Rectángulo sin borde',
31
- linePen: 'Línea',
32
- arrowPen: 'Flecha',
33
- freehandPen: 'Dibuja sin restricción de forma',
34
- selectObjectType: 'Forma de dibuja:',
35
- handTool: 'Mover',
36
- zoom: 'Zoom',
37
- resetView: 'Reiniciar vista',
38
- resizeImageToSelection: 'Redimensionar la imagen a lo que está seleccionado',
39
- deleteSelection: 'Borra la selección',
40
- duplicateSelection: 'Duplica la selección',
41
- pickColorFromScreen: 'Selecciona un color de la pantalla',
42
- clickToPickColorAnnouncement: 'Haga un clic en la pantalla para seleccionar un color',
43
- dropdownShown(toolName: string): string {
44
- return `Menú por ${toolName} es visible`;
45
- },
46
- dropdownHidden: function (toolName: string): string {
47
- return `Menú por ${toolName} fue ocultado`;
48
- },
49
- colorChangedAnnouncement: function (color: string): string {
50
- return `Color fue cambiado a ${color}`;
51
- },
52
- keyboardPanZoom: 'Mover la pantalla con el teclado',
53
- penTool: function (penId: number): string {
54
- return `Lapiz ${penId}`;
55
- },
56
- selectionTool: 'Selecciona',
57
- eraserTool: 'Borrador',
58
- textTool: 'Texto',
59
- enterTextToInsert: 'Entra texto',
60
- textSize: 'Tamaño',
61
- rerenderAsText: 'Redibuja la pantalla al texto',
62
- lockRotation: 'Bloquea rotación',
63
- image: 'Imagen',
64
- imageSize: (size: number, units: string) => `Tamaño del imagen: ${size} ${units}`,
65
- imageLoadError: (message: string)=> `Error cargando imagen: ${message}`,
66
- toggleOverflow: 'Más',
67
-
68
- documentProperties: 'Fondo',
69
- imageWidthOption: 'Ancho: ',
70
- imageHeightOption: 'Alto: ',
71
- backgroundColor: 'Color de fondo: '
72
- };
73
-
74
- export default localization;
@@ -1,27 +0,0 @@
1
-
2
- import { defaultEditorLocalization } from '../localization';
3
- import en from './en';
4
- import es from './es';
5
- import getLocalizationTable from './getLocalizationTable';
6
-
7
- describe('getLocalizationTable', () => {
8
- it('should return the en localization for es_TEST', () => {
9
- expect(getLocalizationTable([ 'es_TEST' ]) === es).toBe(true);
10
- });
11
-
12
- it('should return the default localization for unsupported language', () => {
13
- expect(getLocalizationTable([ 'test' ]) === defaultEditorLocalization).toBe(true);
14
- });
15
-
16
- it('should return the first localization matching a language in the list of user locales', () => {
17
- expect(getLocalizationTable([ 'test_TEST1', 'test_TEST2', 'test_TEST3', 'en_TEST', 'notalanguage']) === en).toBe(true);
18
- });
19
-
20
- it('should return the default localization for unsupported language', () => {
21
- expect(getLocalizationTable([ 'test' ]) === defaultEditorLocalization).toBe(true);
22
- });
23
-
24
- it('should return first of user\'s supported languages', () => {
25
- expect(getLocalizationTable([ 'es_MX', 'es_ES', 'en_US' ]) === es).toBe(true);
26
- });
27
- });
@@ -1,55 +0,0 @@
1
-
2
- import { defaultEditorLocalization, EditorLocalization } from '../localization';
3
- import de from './de';
4
- import en from './en';
5
- import es from './es';
6
-
7
- const allLocales: Record<string, EditorLocalization> = {
8
- de,
9
- en,
10
- es,
11
- };
12
-
13
- // [locale]: A string in the format languageCode_Region or just languageCode. For example, en_US.
14
- const languageFromLocale = (locale: string) => {
15
- const matches = /^(\w+)[_-](\w+)$/.exec(locale);
16
- if (!matches) {
17
- // If not in languageCode_region format, the locale should be the
18
- // languageCode. Return that.
19
- return locale;
20
- }
21
-
22
- return matches[1];
23
- };
24
-
25
- const getLocalizationTable = (userLocales?: readonly string[]): EditorLocalization => {
26
- userLocales ??= navigator.languages;
27
-
28
- let prevLanguage: string|undefined;
29
- for (const locale of userLocales) {
30
- const language = languageFromLocale(locale);
31
-
32
- // If the specific localization of the language is not available, but
33
- // a localization for the language is,
34
- if (prevLanguage && language !== prevLanguage) {
35
- if (prevLanguage in allLocales) {
36
- return allLocales[prevLanguage];
37
- }
38
- }
39
-
40
- // If the full locale (e.g. en_US) is available,
41
- if (locale in allLocales) {
42
- return allLocales[locale];
43
- }
44
-
45
- prevLanguage = language;
46
- }
47
-
48
- if (prevLanguage && prevLanguage in allLocales) {
49
- return allLocales[prevLanguage];
50
- } else {
51
- return defaultEditorLocalization;
52
- }
53
- };
54
-
55
- export default getLocalizationTable;