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,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
- }