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
package/src/math/Mat33.ts DELETED
@@ -1,437 +0,0 @@
1
- import { Point2, Vec2 } from './Vec2';
2
- import Vec3 from './Vec3';
3
-
4
- export type Mat33Array = [
5
- number, number, number,
6
- number, number, number,
7
- number, number, number,
8
- ];
9
-
10
- /**
11
- * Represents a three dimensional linear transformation or
12
- * a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
13
- * **and** translates while a linear transformation just scales/rotates/shears).
14
- */
15
- export default class Mat33 {
16
- private readonly rows: Vec3[];
17
-
18
- /**
19
- * Creates a matrix from inputs in the form,
20
- * ```
21
- * ⎡ a1 a2 a3 ⎤
22
- * ⎢ b1 b2 b3 ⎥
23
- * ⎣ c1 c2 c3 ⎦
24
- * ```
25
- */
26
- public constructor(
27
- public readonly a1: number,
28
- public readonly a2: number,
29
- public readonly a3: number,
30
-
31
- public readonly b1: number,
32
- public readonly b2: number,
33
- public readonly b3: number,
34
-
35
- public readonly c1: number,
36
- public readonly c2: number,
37
- public readonly c3: number
38
- ) {
39
- this.rows = [
40
- Vec3.of(a1, a2, a3),
41
- Vec3.of(b1, b2, b3),
42
- Vec3.of(c1, c2, c3),
43
- ];
44
- }
45
-
46
- /**
47
- * Creates a matrix from the given rows:
48
- * ```
49
- * ⎡ r1.x r1.y r1.z ⎤
50
- * ⎢ r2.x r2.y r2.z ⎥
51
- * ⎣ r3.x r3.y r3.z ⎦
52
- * ```
53
- */
54
- public static ofRows(r1: Vec3, r2: Vec3, r3: Vec3): Mat33 {
55
- return new Mat33(
56
- r1.x, r1.y, r1.z,
57
- r2.x, r2.y, r2.z,
58
- r3.x, r3.y, r3.z
59
- );
60
- }
61
-
62
- public static identity = new Mat33(
63
- 1, 0, 0,
64
- 0, 1, 0,
65
- 0, 0, 1
66
- );
67
-
68
- /**
69
- * Either returns the inverse of this, or, if this matrix is singular/uninvertable,
70
- * returns Mat33.identity.
71
- *
72
- * This may cache the computed inverse and return the cached version instead of recomputing
73
- * it.
74
- */
75
- public inverse(): Mat33 {
76
- return this.computeInverse() ?? Mat33.identity;
77
- }
78
-
79
- public invertable(): boolean {
80
- return this.computeInverse() !== null;
81
- }
82
-
83
- private cachedInverse: Mat33|undefined|null = undefined;
84
- private computeInverse(): Mat33|null {
85
- if (this.cachedInverse !== undefined) {
86
- return this.cachedInverse;
87
- }
88
-
89
- const toIdentity = [
90
- this.rows[0],
91
- this.rows[1],
92
- this.rows[2],
93
- ];
94
-
95
- const toResult = [
96
- Vec3.unitX,
97
- Vec3.unitY,
98
- Vec3.unitZ,
99
- ];
100
-
101
- // Convert toIdentity to the identity matrix and
102
- // toResult to the inverse through elementary row operations
103
- for (let cursor = 0; cursor < 3; cursor++) {
104
- // Select the [cursor]th diagonal entry
105
- let pivot = toIdentity[cursor].at(cursor);
106
-
107
- // Don't divide by zero (treat very small numbers as zero).
108
- const minDivideBy = 1e-10;
109
- if (Math.abs(pivot) < minDivideBy) {
110
- let swapIndex = -1;
111
- // For all other rows,
112
- for (let i = 1; i <= 2; i++) {
113
- const otherRowIdx = (cursor + i) % 3;
114
-
115
- if (Math.abs(toIdentity[otherRowIdx].at(cursor)) >= minDivideBy) {
116
- swapIndex = otherRowIdx;
117
- break;
118
- }
119
- }
120
-
121
- // Can't swap with another row?
122
- if (swapIndex === -1) {
123
- this.cachedInverse = null;
124
- return null;
125
- }
126
-
127
- const tmpIdentityRow = toIdentity[cursor];
128
- const tmpResultRow = toResult[cursor];
129
-
130
- // Swap!
131
- toIdentity[cursor] = toIdentity[swapIndex];
132
- toResult[cursor] = toResult[swapIndex];
133
- toIdentity[swapIndex] = tmpIdentityRow;
134
- toResult[swapIndex] = tmpResultRow;
135
-
136
- pivot = toIdentity[cursor].at(cursor);
137
- }
138
-
139
- // Make toIdentity[k = cursor] = 1
140
- let scale = 1.0 / pivot;
141
- toIdentity[cursor] = toIdentity[cursor].times(scale);
142
- toResult[cursor] = toResult[cursor].times(scale);
143
-
144
- const cursorToIdentityRow = toIdentity[cursor];
145
- const cursorToResultRow = toResult[cursor];
146
-
147
- // Make toIdentity[k ≠ cursor] = 0
148
- for (let i = 1; i <= 2; i++) {
149
- const otherRowIdx = (cursor + i) % 3;
150
- scale = -toIdentity[otherRowIdx].at(cursor);
151
- toIdentity[otherRowIdx] = toIdentity[otherRowIdx].plus(
152
- cursorToIdentityRow.times(scale)
153
- );
154
- toResult[otherRowIdx] = toResult[otherRowIdx].plus(
155
- cursorToResultRow.times(scale)
156
- );
157
- }
158
- }
159
-
160
- const inverse = Mat33.ofRows(
161
- toResult[0],
162
- toResult[1],
163
- toResult[2]
164
- );
165
- this.cachedInverse = inverse;
166
- return inverse;
167
- }
168
-
169
- public transposed(): Mat33 {
170
- return new Mat33(
171
- this.a1, this.b1, this.c1,
172
- this.a2, this.b2, this.c2,
173
- this.a3, this.b3, this.c3
174
- );
175
- }
176
-
177
- public rightMul(other: Mat33): Mat33 {
178
- other = other.transposed();
179
-
180
- const at = (row: number, col: number): number => {
181
- return this.rows[row].dot(other.rows[col]);
182
- };
183
-
184
- return new Mat33(
185
- at(0, 0), at(0, 1), at(0, 2),
186
- at(1, 0), at(1, 1), at(1, 2),
187
- at(2, 0), at(2, 1), at(2, 2)
188
- );
189
- }
190
-
191
- /**
192
- * Applies this as an affine transformation to the given vector.
193
- * Returns a transformed version of `other`.
194
- */
195
- public transformVec2(other: Vec2): Vec2 {
196
- // When transforming a Vec2, we want to use the z transformation
197
- // components of this for translation:
198
- // ⎡ . . tX ⎤
199
- // ⎢ . . tY ⎥
200
- // ⎣ 0 0 1 ⎦
201
- // For this, we need other's z component to be 1 (so that tX and tY
202
- // are scaled by 1):
203
- let intermediate = Vec3.of(other.x, other.y, 1);
204
- intermediate = this.transformVec3(intermediate);
205
-
206
- // Drop the z=1 to allow magnitude to work as expected
207
- return Vec2.of(intermediate.x, intermediate.y);
208
- }
209
-
210
- /**
211
- * Applies this as a linear transformation to the given vector (doesn't translate).
212
- * This is the standard way of transforming vectors in ℝ³.
213
- */
214
- public transformVec3(other: Vec3): Vec3 {
215
- return Vec3.of(
216
- this.rows[0].dot(other),
217
- this.rows[1].dot(other),
218
- this.rows[2].dot(other)
219
- );
220
- }
221
-
222
- /** @returns true iff this is the identity matrix. */
223
- public isIdentity(): boolean {
224
- if (this === Mat33.identity) {
225
- return true;
226
- }
227
-
228
- return this.eq(Mat33.identity);
229
- }
230
-
231
- /** Returns true iff this = other ± fuzz */
232
- public eq(other: Mat33, fuzz: number = 0): boolean {
233
- for (let i = 0; i < 3; i++) {
234
- if (!this.rows[i].eq(other.rows[i], fuzz)) {
235
- return false;
236
- }
237
- }
238
-
239
- return true;
240
- }
241
-
242
- public toString(): string {
243
- let result = '';
244
- const maxColumnLens = [ 0, 0, 0 ];
245
-
246
- // Determine the longest item in each column so we can pad the others to that
247
- // length.
248
- for (const row of this.rows) {
249
- for (let i = 0; i < 3; i++) {
250
- maxColumnLens[i] = Math.max(maxColumnLens[0], `${row.at(i)}`.length);
251
- }
252
- }
253
-
254
- for (let i = 0; i < 3; i++) {
255
- if (i === 0) {
256
- result += '⎡ ';
257
- } else if (i === 1) {
258
- result += '⎢ ';
259
- } else {
260
- result += '⎣ ';
261
- }
262
-
263
- // Add each component of the ith row (after padding it)
264
- for (let j = 0; j < 3; j++) {
265
- const val = this.rows[i].at(j).toString();
266
-
267
- let padding = '';
268
- for (let i = val.length; i < maxColumnLens[j]; i++) {
269
- padding += ' ';
270
- }
271
-
272
- result += val + ', ' + padding;
273
- }
274
-
275
- if (i === 0) {
276
- result += ' ⎤';
277
- } else if (i === 1) {
278
- result += ' ⎥';
279
- } else {
280
- result += ' ⎦';
281
- }
282
- result += '\n';
283
- }
284
-
285
- return result.trimEnd();
286
- }
287
-
288
- /**
289
- * ```
290
- * result[0] = top left element
291
- * result[1] = element at row zero, column 1
292
- * ...
293
- * ```
294
- */
295
- public toArray(): Mat33Array {
296
- return [
297
- this.a1, this.a2, this.a3,
298
- this.b1, this.b2, this.b3,
299
- this.c1, this.c2, this.c3,
300
- ];
301
- }
302
-
303
- /**
304
- * @example
305
- * ```
306
- * new Mat33(
307
- * 1, 2, 3,
308
- * 4, 5, 6,
309
- * 7, 8, 9,
310
- * ).mapEntries(component => component - 1);
311
- * // → ⎡ 0, 1, 2 ⎤
312
- * // ⎢ 3, 4, 5 ⎥
313
- * // ⎣ 6, 7, 8 ⎦
314
- * ```
315
- */
316
- public mapEntries(mapping: (component: number)=>number): Mat33 {
317
- return new Mat33(
318
- mapping(this.a1), mapping(this.a2), mapping(this.a3),
319
- mapping(this.b1), mapping(this.b2), mapping(this.b3),
320
- mapping(this.c1), mapping(this.c2), mapping(this.c3),
321
- );
322
- }
323
-
324
- /** Estimate the scale factor of this matrix (based on the first row). */
325
- public getScaleFactor() {
326
- return Math.hypot(this.a1, this.a2);
327
- }
328
-
329
- /** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
330
- public static translation(amount: Vec2): Mat33 {
331
- // When transforming Vec2s by a 3x3 matrix, we give the input
332
- // Vec2s z = 1. As such,
333
- // outVec2.x = inVec2.x * 1 + inVec2.y * 0 + 1 * amount.x
334
- // ...
335
- return new Mat33(
336
- 1, 0, amount.x,
337
- 0, 1, amount.y,
338
- 0, 0, 1
339
- );
340
- }
341
-
342
- public static zRotation(radians: number, center: Point2 = Vec2.zero): Mat33 {
343
- if (radians === 0) {
344
- return Mat33.identity;
345
- }
346
-
347
- const cos = Math.cos(radians);
348
- const sin = Math.sin(radians);
349
-
350
- // Translate everything so that rotation is about the origin
351
- let result = Mat33.translation(center);
352
-
353
- result = result.rightMul(new Mat33(
354
- cos, -sin, 0,
355
- sin, cos, 0,
356
- 0, 0, 1
357
- ));
358
- return result.rightMul(Mat33.translation(center.times(-1)));
359
- }
360
-
361
- public static scaling2D(amount: number|Vec2, center: Point2 = Vec2.zero): Mat33 {
362
- let result = Mat33.translation(center);
363
- let xAmount, yAmount;
364
-
365
- if (typeof amount === 'number') {
366
- xAmount = amount;
367
- yAmount = amount;
368
- } else {
369
- xAmount = amount.x;
370
- yAmount = amount.y;
371
- }
372
-
373
- result = result.rightMul(new Mat33(
374
- xAmount, 0, 0,
375
- 0, yAmount, 0,
376
- 0, 0, 1
377
- ));
378
-
379
- // Translate such that [center] goes to (0, 0)
380
- return result.rightMul(Mat33.translation(center.times(-1)));
381
- }
382
-
383
- /** @see {@link fromCSSMatrix} */
384
- public toCSSMatrix(): string {
385
- return `matrix(${this.a1},${this.b1},${this.a2},${this.b2},${this.a3},${this.b3})`;
386
- }
387
-
388
- /**
389
- * Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33.
390
- *
391
- * Note that such a matrix has the form,
392
- * ```
393
- * ⎡ a c e ⎤
394
- * ⎢ b d f ⎥
395
- * ⎣ 0 0 1 ⎦
396
- * ```
397
- */
398
- public static fromCSSMatrix(cssString: string): Mat33 {
399
- if (cssString === '' || cssString === 'none') {
400
- return Mat33.identity;
401
- }
402
-
403
- const numberExp = '([-]?\\d*(?:\\.\\d*)?(?:[eE][-]?\\d+)?)';
404
- const numberSepExp = '[, \\t\\n]';
405
- const regExpSource = `^\\s*matrix\\s*\\(${
406
- [
407
- // According to MDN, matrix(a,b,c,d,e,f) has form:
408
- // ⎡ a c e ⎤
409
- // ⎢ b d f ⎥
410
- // ⎣ 0 0 1 ⎦
411
- numberExp, numberExp, numberExp, // a, c, e
412
- numberExp, numberExp, numberExp, // b, d, f
413
- ].join(`${numberSepExp}+`)
414
- }${numberSepExp}*\\)\\s*$`;
415
- const matrixExp = new RegExp(regExpSource, 'i');
416
- const match = matrixExp.exec(cssString);
417
-
418
- if (!match) {
419
- throw new Error(`Unsupported transformation: ${cssString}`);
420
- }
421
-
422
- const matrixData = match.slice(1).map(entry => parseFloat(entry));
423
- const a = matrixData[0];
424
- const b = matrixData[1];
425
- const c = matrixData[2];
426
- const d = matrixData[3];
427
- const e = matrixData[4];
428
- const f = matrixData[5];
429
-
430
- const transform = new Mat33(
431
- a, c, e,
432
- b, d, f,
433
- 0, 0, 1
434
- );
435
- return transform;
436
- }
437
- }
@@ -1,223 +0,0 @@
1
- // Tests to ensure that Paths can be deserialized
2
-
3
- import Path, { PathCommandType } from './Path';
4
- import { Vec2 } from './Vec2';
5
-
6
- describe('Path.fromString', () => {
7
- it('should handle an empty path', () => {
8
- const path = Path.fromString('');
9
- expect(path.geometry.length).toBe(0);
10
- });
11
-
12
- it('should properly handle absolute moveTo commands', () => {
13
- const path1 = Path.fromString('M0,0');
14
- const path2 = Path.fromString('M 0 0');
15
- const path3 = Path.fromString('M 1,1M 2,2 M 3,3');
16
-
17
- expect(path1.parts.length).toBe(0);
18
- expect(path1.startPoint).toMatchObject(Vec2.zero);
19
-
20
- expect(path2.parts.length).toBe(0);
21
- expect(path2.startPoint).toMatchObject(Vec2.zero);
22
-
23
- expect(path3.parts).toMatchObject([
24
- {
25
- kind: PathCommandType.MoveTo,
26
- point: Vec2.of(2, 2),
27
- },
28
- {
29
- kind: PathCommandType.MoveTo,
30
- point: Vec2.of(3,3),
31
- },
32
- ]);
33
- expect(path3.startPoint).toMatchObject(Vec2.of(1, 1));
34
- });
35
-
36
- it('should properly handle relative moveTo commands', () => {
37
- const path = Path.fromString('m1,1 m0,0 m 3,3');
38
- expect(path.parts).toMatchObject([
39
- {
40
- kind: PathCommandType.MoveTo,
41
- point: Vec2.of(1, 1),
42
- },
43
- {
44
- kind: PathCommandType.MoveTo,
45
- point: Vec2.of(4, 4),
46
- },
47
- ]);
48
- expect(path.startPoint).toMatchObject(Vec2.of(1, 1));
49
- });
50
-
51
- it('should handle lineTo commands', () => {
52
- const path = Path.fromString('l1,2L-1,0l0.1,-1.0');
53
- // l is a relative lineTo, but because there
54
- // is no previous command, it should act like an
55
- // absolute moveTo.
56
- expect(path.startPoint).toMatchObject(Vec2.of(1, 2));
57
-
58
- expect(path.parts).toMatchObject([
59
- {
60
- kind: PathCommandType.LineTo,
61
- point: Vec2.of(-1, 0),
62
- },
63
- {
64
- kind: PathCommandType.LineTo,
65
- point: Vec2.of(-0.9, -1.0),
66
- },
67
- ]);
68
- });
69
-
70
- it('"z" should close strokes', () => {
71
- const path1 = Path.fromString('m3,3 l1,2 l1,1 z');
72
- const path2 = Path.fromString('m3,3 l1,2 l1,1 Z');
73
-
74
- expect(path1.startPoint).toMatchObject(Vec2.of(3,3));
75
- expect(path2.startPoint).toMatchObject(path1.startPoint);
76
- expect(path1.parts).toMatchObject(path2.parts);
77
- expect(path1.parts).toMatchObject([
78
- {
79
- kind: PathCommandType.LineTo,
80
- point: Vec2.of(4, 5),
81
- },
82
- {
83
- kind: PathCommandType.LineTo,
84
- point: Vec2.of(5, 6),
85
- },
86
- {
87
- kind: PathCommandType.LineTo,
88
- point: path1.startPoint,
89
- }
90
- ]);
91
- });
92
-
93
- it('should break compoents at -s', () => {
94
- const path = Path.fromString('m1-1 L-1-1-3-4-5-6,5-1');
95
- expect(path.parts.length).toBe(4);
96
- expect(path.parts).toMatchObject([
97
- {
98
- kind: PathCommandType.LineTo,
99
- point: Vec2.of(-1, -1),
100
- },
101
- {
102
- kind: PathCommandType.LineTo,
103
- point: Vec2.of(-3, -4),
104
- },
105
- {
106
- kind: PathCommandType.LineTo,
107
- point: Vec2.of(-5, -6),
108
- },
109
- {
110
- kind: PathCommandType.LineTo,
111
- point: Vec2.of(5, -1),
112
- },
113
- ]);
114
- });
115
-
116
- it('should properly handle cubic Bézier curves', () => {
117
- const path = Path.fromString('m1,1 c1,1 0-3 4 5 C1,1 0.1, 0.1 0, 0');
118
- expect(path.parts.length).toBe(2);
119
- expect(path.parts).toMatchObject([
120
- {
121
- kind: PathCommandType.CubicBezierTo,
122
- controlPoint1: Vec2.of(2, 2),
123
- controlPoint2: Vec2.of(1, -2),
124
- endPoint: Vec2.of(5, 6),
125
- },
126
- {
127
- kind: PathCommandType.CubicBezierTo,
128
- controlPoint1: Vec2.of(1, 1),
129
- controlPoint2: Vec2.of(0.1, 0.1),
130
- endPoint: Vec2.zero,
131
- }
132
- ]);
133
- });
134
-
135
- it('should handle quadratic Bézier curves', () => {
136
- const path = Path.fromString(' Q1 1,2 3 q-1 -2,-3 -4 Q 1 2,3 4');
137
- expect(path.parts).toMatchObject([
138
- {
139
- kind: PathCommandType.QuadraticBezierTo,
140
- controlPoint: Vec2.of(1, 1),
141
- endPoint: Vec2.of(2, 3),
142
- },
143
- {
144
- kind: PathCommandType.QuadraticBezierTo,
145
- controlPoint: Vec2.of(1, 1),
146
- endPoint: Vec2.of(-1, -1),
147
- },
148
- {
149
- kind: PathCommandType.QuadraticBezierTo,
150
- controlPoint: Vec2.of(1, 2),
151
- endPoint: Vec2.of(3, 4),
152
- },
153
- ]);
154
- expect(path.startPoint).toMatchObject(Vec2.of(1, 1));
155
- });
156
-
157
- it('should correctly handle a command followed by multiple sets of arguments', () => {
158
- // Commands followed by multiple sets of arguments, for example,
159
- // l 5,10 5,4 3,2,
160
- // should be interpreted as multiple commands. Our example, is therefore equivalent to,
161
- // l 5,10 l 5,4 l 3,2
162
-
163
- const path = Path.fromString(`
164
- L5,10 1,1
165
- 2,2 -3,-1
166
- q 1,2 1,1
167
- -1,-1 -3,-4
168
- h -4 -1
169
- V 3 5 1
170
- `);
171
- expect(path.parts).toMatchObject([
172
- {
173
- kind: PathCommandType.LineTo,
174
- point: Vec2.of(1, 1),
175
- },
176
- {
177
- kind: PathCommandType.LineTo,
178
- point: Vec2.of(2, 2),
179
- },
180
- {
181
- kind: PathCommandType.LineTo,
182
- point: Vec2.of(-3, -1),
183
- },
184
-
185
- // q 1,2 1,1 -1,-1 -3,-4
186
- {
187
- kind: PathCommandType.QuadraticBezierTo,
188
- controlPoint: Vec2.of(-2, 1),
189
- endPoint: Vec2.of(-2, 0),
190
- },
191
- {
192
- kind: PathCommandType.QuadraticBezierTo,
193
- controlPoint: Vec2.of(-3, -1),
194
- endPoint: Vec2.of(-5, -4),
195
- },
196
-
197
- // h -4 -1
198
- {
199
- kind: PathCommandType.LineTo,
200
- point: Vec2.of(-9, -4),
201
- },
202
- {
203
- kind: PathCommandType.LineTo,
204
- point: Vec2.of(-10, -4),
205
- },
206
-
207
- // V 3 5 1
208
- {
209
- kind: PathCommandType.LineTo,
210
- point: Vec2.of(-10, 3),
211
- },
212
- {
213
- kind: PathCommandType.LineTo,
214
- point: Vec2.of(-10, 5),
215
- },
216
- {
217
- kind: PathCommandType.LineTo,
218
- point: Vec2.of(-10, 1),
219
- },
220
- ]);
221
- expect(path.startPoint).toMatchObject(Vec2.of(5, 10));
222
- });
223
- });