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,222 +0,0 @@
1
- import Color4 from '../../Color4';
2
- import { LoadSaveDataTable } from '../../components/AbstractComponent';
3
- import Mat33 from '../../math/Mat33';
4
- import Path, { PathCommand, PathCommandType } from '../../math/Path';
5
- import Rect2 from '../../math/Rect2';
6
- import { Point2, Vec2 } from '../../math/Vec2';
7
- import Viewport from '../../Viewport';
8
- import RenderingStyle, { stylesEqual } from '../RenderingStyle';
9
- import TextStyle from '../TextRenderingStyle';
10
-
11
- export interface RenderablePathSpec {
12
- startPoint: Point2;
13
- commands: PathCommand[];
14
- style: RenderingStyle;
15
- path?: Path;
16
- }
17
-
18
- export interface RenderableImage {
19
- transform: Mat33;
20
-
21
- // An Image or HTMLCanvasElement. If an Image, it must be loaded from the same origin as this
22
- // (and should have `src=this.base64Url`).
23
- image: HTMLImageElement|HTMLCanvasElement;
24
-
25
- // All images that can be drawn **must** have a base64 URL in the form
26
- // data:image/[format];base64,[data here]
27
- // If `image` is an Image, this should be equivalent to `image.src`.
28
- base64Url: string;
29
-
30
- label?: string;
31
- }
32
-
33
- export default abstract class AbstractRenderer {
34
- // If null, this' transformation is linked to the Viewport
35
- private selfTransform: Mat33|null = null;
36
- private transformStack: Array<Mat33|null> = [];
37
-
38
- protected constructor(private viewport: Viewport) { }
39
-
40
- // this.canvasToScreen, etc. should be used instead of the corresponding
41
- // methods on Viewport.
42
- protected getViewport(): Viewport { return this.viewport; }
43
-
44
- // Returns the size of the rendered region of this on
45
- // the display (in pixels).
46
- public abstract displaySize(): Vec2;
47
-
48
- public abstract clear(): void;
49
- protected abstract beginPath(startPoint: Point2): void;
50
- protected abstract endPath(style: RenderingStyle): void;
51
- protected abstract lineTo(point: Point2): void;
52
- protected abstract moveTo(point: Point2): void;
53
- protected abstract traceCubicBezierCurve(
54
- p1: Point2, p2: Point2, p3: Point2,
55
- ): void;
56
- protected abstract traceQuadraticBezierCurve(
57
- controlPoint: Point2, endPoint: Point2,
58
- ): void;
59
- public abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
60
- public abstract drawImage(image: RenderableImage): void;
61
-
62
- // Returns true iff the given rectangle is so small, rendering anything within
63
- // it has no effect on the image.
64
- public abstract isTooSmallToRender(rect: Rect2): boolean;
65
-
66
- public setDraftMode(_draftMode: boolean) { }
67
-
68
- protected objectLevel: number = 0;
69
- private currentPaths: RenderablePathSpec[]|null = null;
70
- private flushPath() {
71
- if (!this.currentPaths) {
72
- return;
73
- }
74
-
75
- let lastStyle: RenderingStyle|null = null;
76
- for (const path of this.currentPaths) {
77
- const { startPoint, commands, style } = path;
78
-
79
- if (!lastStyle || !stylesEqual(lastStyle, style)) {
80
- if (lastStyle) {
81
- this.endPath(lastStyle);
82
- }
83
-
84
- this.beginPath(startPoint);
85
- lastStyle = style;
86
- } else {
87
- this.moveTo(startPoint);
88
- }
89
-
90
- for (const command of commands) {
91
- if (command.kind === PathCommandType.LineTo) {
92
- this.lineTo(command.point);
93
- } else if (command.kind === PathCommandType.MoveTo) {
94
- this.moveTo(command.point);
95
- } else if (command.kind === PathCommandType.CubicBezierTo) {
96
- this.traceCubicBezierCurve(
97
- command.controlPoint1, command.controlPoint2, command.endPoint
98
- );
99
- } else if (command.kind === PathCommandType.QuadraticBezierTo) {
100
- this.traceQuadraticBezierCurve(
101
- command.controlPoint, command.endPoint
102
- );
103
- }
104
- }
105
- }
106
-
107
- if (lastStyle) {
108
- this.endPath(lastStyle);
109
- }
110
- }
111
-
112
- public drawPath(path: RenderablePathSpec) {
113
- // If we're being called outside of an object,
114
- // we can't delay rendering
115
- if (this.objectLevel === 0) {
116
- this.currentPaths = [path];
117
- this.flushPath();
118
- this.currentPaths = null;
119
- } else {
120
- // Otherwise, don't render paths all at once. This prevents faint lines between
121
- // segments of the same stroke from being visible.
122
- this.currentPaths!.push(path);
123
- }
124
- }
125
-
126
- // Strokes a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
127
- // This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
128
- public drawRect(rect: Rect2, lineWidth: number, lineFill: RenderingStyle) {
129
- const path = Path.fromRect(rect, lineWidth);
130
- this.drawPath(path.toRenderable(lineFill));
131
- }
132
-
133
- // Fills a rectangle.
134
- public fillRect(rect: Rect2, fill: Color4) {
135
- const path = Path.fromRect(rect);
136
- this.drawPath(path.toRenderable({ fill }));
137
- }
138
-
139
- // Note the start of an object with the given bounding box.
140
- // Renderers are not required to support [clip]
141
- public startObject(_boundingBox: Rect2, _clip?: boolean) {
142
- this.currentPaths = [];
143
- this.objectLevel ++;
144
- }
145
-
146
- /**
147
- * Notes the end of an object.
148
- * @param _loaderData - a map from strings to JSON-ifyable objects
149
- * and contains properties attached to the object by whatever loader loaded the image. This
150
- * is used to preserve attributes not supported by js-draw when loading/saving an image.
151
- * Renderers may ignore this.
152
- *
153
- * @param _objectTags - a list of labels (e.g. `className`s) to be attached to the object.
154
- * Renderers may ignore this.
155
- */
156
- public endObject(_loaderData?: LoadSaveDataTable, _objectTags?: string[]) {
157
- // Render the paths all at once
158
- this.flushPath();
159
- this.currentPaths = null;
160
- this.objectLevel --;
161
-
162
- if (this.objectLevel < 0) {
163
- throw new Error(
164
- 'More objects have ended than have been started (negative object nesting level)!'
165
- );
166
- }
167
- }
168
-
169
- protected getNestingLevel() {
170
- return this.objectLevel;
171
- }
172
-
173
- // Draw a representation of [points]. Intended for debugging.
174
- public abstract drawPoints(...points: Point2[]): void;
175
-
176
-
177
- // Returns true iff other can be rendered onto this without data loss.
178
- public canRenderFromWithoutDataLoss(_other: AbstractRenderer): boolean {
179
- return false;
180
- }
181
-
182
- // MUST throw if other and this are not of the same base class.
183
- public renderFromOtherOfSameType(_renderTo: Mat33, other: AbstractRenderer) {
184
- throw new Error(`Unable to render from ${other}: Not implemented`);
185
- }
186
-
187
- // Set a transformation to apply to things before rendering,
188
- // replacing the viewport's transform.
189
- public setTransform(transform: Mat33|null) {
190
- this.selfTransform = transform;
191
- }
192
-
193
- public pushTransform(transform: Mat33) {
194
- this.transformStack.push(this.selfTransform);
195
- this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
196
- }
197
-
198
- public popTransform() {
199
- if (this.transformStack.length === 0) {
200
- throw new Error('Unable to pop more transforms than have been pushed!');
201
- }
202
-
203
- this.setTransform(this.transformStack.pop() ?? null);
204
- }
205
-
206
- // Get the matrix that transforms a vector on the canvas to a vector on this'
207
- // rendering target.
208
- public getCanvasToScreenTransform(): Mat33 {
209
- if (this.selfTransform) {
210
- return this.selfTransform;
211
- }
212
- return this.viewport.canvasToScreenTransform;
213
- }
214
-
215
- public canvasToScreen(vec: Vec2): Vec2 {
216
- return this.getCanvasToScreenTransform().transformVec2(vec);
217
- }
218
-
219
- public getSizeOfCanvasPixelOnScreen(): number {
220
- return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
221
- }
222
- }
@@ -1,296 +0,0 @@
1
- import Color4 from '../../Color4';
2
- import TextComponent from '../../components/TextComponent';
3
- import Mat33 from '../../math/Mat33';
4
- import Path from '../../math/Path';
5
- import Rect2 from '../../math/Rect2';
6
- import { Point2, Vec2 } from '../../math/Vec2';
7
- import Vec3 from '../../math/Vec3';
8
- import Viewport from '../../Viewport';
9
- import RenderingStyle from '../RenderingStyle';
10
- import TextStyle from '../TextRenderingStyle';
11
- import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
12
-
13
- /**
14
- * Renders onto a `CanvasRenderingContext2D`.
15
- *
16
- * @example
17
- * ```ts
18
- * const editor = new Editor(document.body);
19
- *
20
- * const canvas = document.createElement('canvas');
21
- * const ctx = canvas.getContext('2d');
22
- *
23
- * // Ensure that the canvas can fit the entire rendering
24
- * const viewport = editor.image.getImportExportViewport();
25
- * canvas.width = viewport.getScreenRectSize().x;
26
- * canvas.height = viewport.getScreenRectSize().y;
27
- *
28
- * // Render editor.image onto the renderer
29
- * const renderer = new CanvasRenderer(ctx, viewport);
30
- * editor.image.render(renderer, viewport);
31
- * ```
32
- */
33
- export default class CanvasRenderer extends AbstractRenderer {
34
- private ignoreObjectsAboveLevel: number|null = null;
35
- private ignoringObject: boolean = false;
36
- private currentObjectBBox: Rect2|null = null;
37
-
38
- // Minimum square distance of a control point from the line between the end points
39
- // for the curve not to be drawn as a line.
40
- // For example, if [minSquareCurveApproxDist] = 25 = 5², then a control point on a quadratic
41
- // bezier curve needs to be at least 5 units away from the line between the curve's end points
42
- // for the curve to be drawn as a Bezier curve (and not a line).
43
- private minSquareCurveApproxDist: number;
44
-
45
- // Minimum size of an object (in pixels) for it to be rendered.
46
- private minRenderSizeAnyDimen: number;
47
- private minRenderSizeBothDimens: number;
48
-
49
- /**
50
- * Creates a new `CanvasRenderer` that renders to the given rendering context.
51
- * The `viewport` is used to determine the translation/rotation/scaling of the content
52
- * to draw.
53
- */
54
- public constructor(private ctx: CanvasRenderingContext2D, viewport: Viewport) {
55
- super(viewport);
56
- this.setDraftMode(false);
57
- }
58
-
59
- private transformBy(transformBy: Mat33) {
60
- // From MDN, transform(a,b,c,d,e,f)
61
- // takes input such that
62
- // ⎡ a c e ⎤
63
- // ⎢ b d f ⎥ transforms content drawn to [ctx].
64
- // ⎣ 0 0 1 ⎦
65
- this.ctx.transform(
66
- transformBy.a1, transformBy.b1, // a, b
67
- transformBy.a2, transformBy.b2, // c, d
68
- transformBy.a3, transformBy.b3, // e, f
69
- );
70
- }
71
-
72
- public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
73
- return other instanceof CanvasRenderer;
74
- }
75
-
76
- public renderFromOtherOfSameType(transformBy: Mat33, other: AbstractRenderer): void {
77
- if (!(other instanceof CanvasRenderer)) {
78
- throw new Error(`${other} cannot be rendered onto ${this}`);
79
- }
80
- transformBy = this.getCanvasToScreenTransform().rightMul(transformBy);
81
- this.ctx.save();
82
- this.transformBy(transformBy);
83
- this.ctx.drawImage(other.ctx.canvas, 0, 0);
84
- this.ctx.restore();
85
- }
86
-
87
- // Set parameters for lower/higher quality rendering
88
- public setDraftMode(draftMode: boolean) {
89
- if (draftMode) {
90
- this.minSquareCurveApproxDist = 9;
91
- this.minRenderSizeBothDimens = 2;
92
- this.minRenderSizeAnyDimen = 0.5;
93
- } else {
94
- this.minSquareCurveApproxDist = 0.5;
95
- this.minRenderSizeBothDimens = 0.2;
96
- this.minRenderSizeAnyDimen = 1e-6;
97
- }
98
- }
99
-
100
- public displaySize(): Vec2 {
101
- return Vec2.of(
102
- this.ctx.canvas.clientWidth,
103
- this.ctx.canvas.clientHeight,
104
- );
105
- }
106
-
107
- public clear() {
108
- this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
109
- }
110
-
111
- protected beginPath(startPoint: Point2) {
112
- startPoint = this.canvasToScreen(startPoint);
113
-
114
- this.ctx.beginPath();
115
- this.ctx.moveTo(startPoint.x, startPoint.y);
116
- }
117
-
118
- protected endPath(style: RenderingStyle) {
119
- this.ctx.fillStyle = style.fill.toHexString();
120
- this.ctx.fill();
121
-
122
- if (style.stroke) {
123
- this.ctx.strokeStyle = style.stroke.color.toHexString();
124
- this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
125
- this.ctx.lineCap = 'round';
126
- this.ctx.lineJoin = 'round';
127
- this.ctx.stroke();
128
- }
129
-
130
- this.ctx.closePath();
131
- }
132
-
133
- protected lineTo(point: Point2) {
134
- point = this.canvasToScreen(point);
135
- this.ctx.lineTo(point.x, point.y);
136
- }
137
-
138
- protected moveTo(point: Point2) {
139
- point = this.canvasToScreen(point);
140
- this.ctx.moveTo(point.x, point.y);
141
- }
142
-
143
- protected traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2) {
144
- p1 = this.canvasToScreen(p1);
145
- p2 = this.canvasToScreen(p2);
146
- p3 = this.canvasToScreen(p3);
147
-
148
- // Approximate the curve if small enough.
149
- const delta1 = p2.minus(p1);
150
- const delta2 = p3.minus(p2);
151
- if (delta1.magnitudeSquared() < this.minSquareCurveApproxDist
152
- && delta2.magnitudeSquared() < this.minSquareCurveApproxDist) {
153
- this.ctx.lineTo(p3.x, p3.y);
154
- } else {
155
- this.ctx.bezierCurveTo(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y);
156
- }
157
- }
158
-
159
- protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
160
- controlPoint = this.canvasToScreen(controlPoint);
161
- endPoint = this.canvasToScreen(endPoint);
162
-
163
- // Approximate the curve with a line if small enough
164
- const delta = controlPoint.minus(endPoint);
165
- if (delta.magnitudeSquared() < this.minSquareCurveApproxDist) {
166
- this.ctx.lineTo(endPoint.x, endPoint.y);
167
- } else {
168
- this.ctx.quadraticCurveTo(
169
- controlPoint.x, controlPoint.y, endPoint.x, endPoint.y
170
- );
171
- }
172
- }
173
-
174
- public drawPath(path: RenderablePathSpec) {
175
- if (this.ignoringObject) {
176
- return;
177
- }
178
-
179
- // If part of a huge object, it might be worth trimming the path
180
- if (this.currentObjectBBox?.containsRect(this.getViewport().visibleRect)) {
181
- // Try to trim/remove parts of the path outside of the bounding box.
182
- path = Path.visualEquivalent(
183
- path,
184
- this.getViewport().visibleRect
185
- );
186
- }
187
-
188
- super.drawPath(path);
189
- }
190
-
191
- public drawText(text: string, transform: Mat33, style: TextStyle): void {
192
- this.ctx.save();
193
- transform = this.getCanvasToScreenTransform().rightMul(transform);
194
- this.transformBy(transform);
195
- TextComponent.applyTextStyles(this.ctx, style);
196
-
197
- if (style.renderingStyle.fill.a !== 0) {
198
- this.ctx.fillStyle = style.renderingStyle.fill.toHexString();
199
- this.ctx.fillText(text, 0, 0);
200
- }
201
- if (style.renderingStyle.stroke) {
202
- this.ctx.strokeStyle = style.renderingStyle.stroke.color.toHexString();
203
- this.ctx.lineWidth = style.renderingStyle.stroke.width;
204
- this.ctx.strokeText(text, 0, 0);
205
- }
206
-
207
- this.ctx.restore();
208
- }
209
-
210
- public drawImage(image: RenderableImage) {
211
- this.ctx.save();
212
- const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
213
- this.transformBy(transform);
214
-
215
- this.ctx.drawImage(image.image, 0, 0);
216
- this.ctx.restore();
217
- }
218
-
219
- private clipLevels: number[] = [];
220
- public startObject(boundingBox: Rect2, clip?: boolean) {
221
- if (this.isTooSmallToRender(boundingBox)) {
222
- this.ignoreObjectsAboveLevel = this.getNestingLevel();
223
- this.ignoringObject = true;
224
- }
225
-
226
- super.startObject(boundingBox);
227
- this.currentObjectBBox = boundingBox;
228
-
229
- if (!this.ignoringObject && clip) {
230
- this.clipLevels.push(this.objectLevel);
231
- this.ctx.save();
232
- this.ctx.beginPath();
233
- for (const corner of boundingBox.corners) {
234
- const screenCorner = this.canvasToScreen(corner);
235
- this.ctx.lineTo(screenCorner.x, screenCorner.y);
236
- }
237
- this.ctx.clip();
238
- }
239
- }
240
-
241
- public endObject() {
242
- if (!this.ignoringObject && this.clipLevels.length > 0) {
243
- if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
244
- this.ctx.restore();
245
- this.clipLevels.pop();
246
- }
247
- }
248
-
249
- this.currentObjectBBox = null;
250
- super.endObject();
251
-
252
- // If exiting an object with a too-small-to-draw bounding box,
253
- if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
254
- this.ignoreObjectsAboveLevel = null;
255
- this.ignoringObject = false;
256
- }
257
- }
258
-
259
- // @internal
260
- public drawPoints(...points: Point2[]) {
261
- const pointRadius = 10;
262
-
263
- for (let i = 0; i < points.length; i++) {
264
- const point = this.canvasToScreen(points[i]);
265
-
266
- this.ctx.beginPath();
267
- this.ctx.arc(point.x, point.y, pointRadius, 0, Math.PI * 2);
268
- this.ctx.fillStyle = Color4.ofRGBA(
269
- 0.5 + Math.sin(i) / 2,
270
- 1.0,
271
- 0.5 + Math.cos(i * 0.2) / 4, 0.5
272
- ).toHexString();
273
- this.ctx.fill();
274
- this.ctx.stroke();
275
- this.ctx.closePath();
276
-
277
- this.ctx.textAlign = 'center';
278
- this.ctx.textBaseline = 'middle';
279
- this.ctx.fillStyle = 'black';
280
- this.ctx.fillText(`${i}`, point.x, point.y, pointRadius * 2);
281
- }
282
- }
283
-
284
- // @internal
285
- public isTooSmallToRender(rect: Rect2): boolean {
286
- // Should we ignore all objects within this object's bbox?
287
- const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);
288
-
289
- const bothDimenMinSize = this.minRenderSizeBothDimens;
290
- const bothTooSmall = Math.abs(diagonal.x) < bothDimenMinSize && Math.abs(diagonal.y) < bothDimenMinSize;
291
- const anyDimenMinSize = this.minRenderSizeAnyDimen;
292
- const anyTooSmall = Math.abs(diagonal.x) < anyDimenMinSize || Math.abs(diagonal.y) < anyDimenMinSize;
293
-
294
- return bothTooSmall || anyTooSmall;
295
- }
296
- }
@@ -1,42 +0,0 @@
1
-
2
- import Mat33 from '../../math/Mat33';
3
- import { Vec2 } from '../../math/Vec2';
4
- import Viewport from '../../Viewport';
5
- import DummyRenderer from './DummyRenderer';
6
-
7
- const makeRenderer = (): [DummyRenderer, Viewport] => {
8
- const viewport = new Viewport(() => {});
9
- return [ new DummyRenderer(viewport), viewport ];
10
- };
11
-
12
- describe('DummyRenderer', () => {
13
- it('should correctly calculate the size of a pixel on the screen', () => {
14
- const [ renderer, viewport ] = makeRenderer();
15
- viewport.updateScreenSize(Vec2.of(100, 100));
16
- viewport.resetTransform(Mat33.identity);
17
-
18
- expect(1/viewport.getScaleFactor()).toBe(1);
19
- expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
20
-
21
- // Updating the translation matrix shouldn't affect the size of a pixel on the
22
- // screen.
23
- renderer.setTransform(Mat33.translation(Vec2.of(-1, -2)));
24
- expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
25
- viewport.resetTransform(Mat33.translation(Vec2.of(3, 4)));
26
- expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(1);
27
-
28
- // Scale objects by a factor of 2 when drawing
29
- renderer.setTransform(Mat33.scaling2D(2));
30
- expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(2);
31
- viewport.resetTransform(Mat33.scaling2D(0.5));
32
-
33
- // When a renderer transform is set, **only** the renderer transform should be used.
34
- expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(2);
35
- renderer.setTransform(null);
36
- expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(0.5);
37
-
38
- // Rotating should not affect the size of a pixel
39
- renderer.setTransform(Mat33.zRotation(Math.PI / 4).rightMul(Mat33.scaling2D(4)));
40
- expect(renderer.getSizeOfCanvasPixelOnScreen()).toBe(4);
41
- });
42
- });
@@ -1,136 +0,0 @@
1
- import Mat33 from '../../math/Mat33';
2
- import Rect2 from '../../math/Rect2';
3
- import { Point2, Vec2 } from '../../math/Vec2';
4
- import Vec3 from '../../math/Vec3';
5
- import Viewport from '../../Viewport';
6
- import RenderingStyle from '../RenderingStyle';
7
- import TextStyle from '../TextRenderingStyle';
8
- import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
9
-
10
- // Renderer that outputs almost nothing. Useful for automated tests.
11
- export default class DummyRenderer extends AbstractRenderer {
12
- // Variables that track the state of what's been rendered
13
- public clearedCount: number = 0;
14
- public renderedPathCount: number = 0;
15
- public lastFillStyle: RenderingStyle|null = null;
16
- public lastPoint: Point2|null = null;
17
- public objectNestingLevel: number = 0;
18
- public lastText: string|null = null;
19
- public lastImage: RenderableImage|null = null;
20
-
21
- // List of points drawn since the last clear.
22
- public pointBuffer: Point2[] = [];
23
-
24
- public constructor(viewport: Viewport) {
25
- super(viewport);
26
- }
27
-
28
- public displaySize(): Vec2 {
29
- // Do we have a stored viewport size?
30
- const viewportSize = this.getViewport().getScreenRectSize();
31
-
32
- // Don't use a 0x0 viewport — DummyRenderer is often used
33
- // for tests that run without a display, so pretend we have a
34
- // reasonable-sized display.
35
- if (viewportSize.x === 0 || viewportSize.y === 0) {
36
- return Vec2.of(640, 480);
37
- }
38
-
39
- return viewportSize;
40
- }
41
-
42
- public clear() {
43
- this.clearedCount ++;
44
- this.renderedPathCount = 0;
45
- this.pointBuffer = [];
46
- this.lastText = null;
47
- this.lastImage = null;
48
-
49
- // Ensure all objects finished rendering
50
- if (this.objectNestingLevel > 0) {
51
- throw new Error(
52
- `Within an object while clearing! Nesting level: ${this.objectNestingLevel}`
53
- );
54
- }
55
- }
56
- protected beginPath(startPoint: Vec3) {
57
- this.lastPoint = startPoint;
58
- this.pointBuffer.push(startPoint);
59
- }
60
- protected endPath(style: RenderingStyle) {
61
- this.renderedPathCount++;
62
- this.lastFillStyle = style;
63
- }
64
- protected lineTo(point: Vec3) {
65
- point = this.canvasToScreen(point);
66
-
67
- this.lastPoint = point;
68
- this.pointBuffer.push(point);
69
- }
70
- protected moveTo(point: Point2) {
71
- point = this.canvasToScreen(point);
72
-
73
- this.lastPoint = point;
74
- this.pointBuffer.push(point);
75
- }
76
- protected traceCubicBezierCurve(p1: Vec3, p2: Vec3, p3: Vec3) {
77
- p1 = this.canvasToScreen(p1);
78
- p2 = this.canvasToScreen(p2);
79
- p3 = this.canvasToScreen(p3);
80
-
81
- this.lastPoint = p3;
82
- this.pointBuffer.push(p1, p2, p3);
83
- }
84
- protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3) {
85
- controlPoint = this.canvasToScreen(controlPoint);
86
- endPoint = this.canvasToScreen(endPoint);
87
-
88
- this.lastPoint = endPoint;
89
- this.pointBuffer.push(controlPoint, endPoint);
90
- }
91
- public drawPoints(..._points: Vec3[]) {
92
- // drawPoints is intended for debugging.
93
- // As such, it is unlikely to be the target of automated tests.
94
- }
95
-
96
-
97
- public drawText(text: string, _transform: Mat33, _style: TextStyle): void {
98
- this.lastText = text;
99
- }
100
- public drawImage(image: RenderableImage) {
101
- this.lastImage = image;
102
- }
103
-
104
- public startObject(boundingBox: Rect2, _clip: boolean) {
105
- super.startObject(boundingBox);
106
-
107
- this.objectNestingLevel += 1;
108
- }
109
- public endObject() {
110
- super.endObject();
111
-
112
- this.objectNestingLevel -= 1;
113
- }
114
-
115
- public isTooSmallToRender(_rect: Rect2): boolean {
116
- return false;
117
- }
118
-
119
-
120
- public canRenderFromWithoutDataLoss(other: AbstractRenderer) {
121
- return other instanceof DummyRenderer;
122
- }
123
-
124
- public renderFromOtherOfSameType(transform: Mat33, other: AbstractRenderer): void {
125
- if (!(other instanceof DummyRenderer)) {
126
- throw new Error(`${other} cannot be rendered onto ${this}`);
127
- }
128
-
129
- this.renderedPathCount += other.renderedPathCount;
130
- this.lastFillStyle = other.lastFillStyle;
131
- this.lastPoint = other.lastPoint;
132
- this.pointBuffer.push(...other.pointBuffer.map(point => {
133
- return transform.transformVec2(point);
134
- }));
135
- }
136
- }