js-draw - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

CHANGELOG.md

@@ -0,1 +1,6 @@
+# 0.1.8
+ * Don't render if the screen has a size of 0x0.
+   * This was breaking the cache data structure's invariant -- cache blocks weren't dividing when they had zero size.
+ * Fix rectangles drawn with the pen's rectangle mode not having edges parallel to the viewport.
+
 # 0.1.7
@@ -2,0 +7,0 @@ * Show the six most recent color selections in the color palette.

dist/src/components/builders/RectangleBuilder.d.ts

 import Rect2 from '../../geometry/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
+import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';
@@ -11,4 +12,5 @@ import { ComponentBuilder, ComponentBuilderFactory } from './types';
     private filled;
+    private viewport;
     private endPoint;
-    constructor(startPoint: StrokeDataPoint, filled: boolean);
+    constructor(startPoint: StrokeDataPoint, filled: boolean, viewport: Viewport);
     getBBox(): Rect2;
@@ -15,0 +17,0 @@ private buildPreview;

dist/src/components/builders/RectangleBuilder.js

@@ -0,14 +1,16 @@
+import Mat33 from '../../geometry/Mat33';
 import Path from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
 import Stroke from '../Stroke';
-export const makeFilledRectangleBuilder = (initialPoint, _viewport) => {
-    return new RectangleBuilder(initialPoint, true);
+export const makeFilledRectangleBuilder = (initialPoint, viewport) => {
+    return new RectangleBuilder(initialPoint, true, viewport);
 };
-export const makeOutlinedRectangleBuilder = (initialPoint, _viewport) => {
-    return new RectangleBuilder(initialPoint, false);
+export const makeOutlinedRectangleBuilder = (initialPoint, viewport) => {
+    return new RectangleBuilder(initialPoint, false, viewport);
 };
 export default class RectangleBuilder {
-    constructor(startPoint, filled) {
+    constructor(startPoint, filled, viewport) {
         this.startPoint = startPoint;
         this.filled = filled;
+        this.viewport = viewport;
         // Initially, the start and end points are the same.
@@ -22,5 +24,12 @@ this.endPoint = startPoint;
     buildPreview() {
-        const startPoint = this.startPoint.pos;
-        const endPoint = this.endPoint.pos;
-        const path = Path.fromRect(Rect2.fromCorners(startPoint, endPoint), this.filled ? null : this.endPoint.width);
+        const canvasAngle = this.viewport.getRotationAngle();
+        const rotationMat = Mat33.zRotation(-canvasAngle);
+        // Adjust startPoint and endPoint such that applying [rotationMat] to them
+        // brings them to this.startPoint and this.endPoint.
+        const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
+        const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
+        const rect = Rect2.fromCorners(startPoint, endPoint);
+        const path = Path.fromRect(rect, this.filled ? null : this.endPoint.width).transformedBy(
+        // Rotate the canvas rectangle so that its rotation matches the screen
+        rotationMat);
         const preview = new Stroke([
@@ -27,0 +36,0 @@ path.toRenderable({

dist/src/Editor.js

@@ -304,2 +304,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         this.display.startRerender();
+        // Don't render if the display has zero size.
+        if (this.display.width === 0 || this.display.height === 0) {
+            return;
+        }
         // Draw a rectangle around the region that will be visible on save
@@ -306,0 +310,0 @@ const renderer = this.display.getDryInkRenderer();

dist/src/rendering/caching/RenderingCacheNode.js

@@ -47,2 +47,6 @@ // A cache record with sub-nodes.
             const childRects = this.region.divideIntoGrid(cacheDivisionSize, cacheDivisionSize);
+            if (this.region.size.x === 0 || this.region.size.y === 0) {
+                console.warn('Cache element has zero size! Not generating children.');
+                return;
+            }
             for (const rect of childRects) {
@@ -287,3 +291,3 @@ const child = new RenderingCacheNode(rect, this.cacheState);
         if (this.instantiatedChildren.length !== cacheDivisionSize * cacheDivisionSize && this.instantiatedChildren.length !== 0) {
-            throw new Error('Repcheck: Wrong number of children');
+            throw new Error(`Repcheck: Wrong number of children. Got ${this.instantiatedChildren.length}`);
         }
@@ -290,0 +294,0 @@ if (this.renderedIds[1] !== undefined && this.renderedIds[0] >= this.renderedIds[1]) {

package.json

 {
   "name": "js-draw",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
@@ -5,0 +5,0 @@ "main": "dist/src/Editor.js",

src/components/builders/RectangleBuilder.ts

@@ -0,1 +1,2 @@
+import Mat33 from '../../geometry/Mat33';
 import Path from '../../geometry/Path';
@@ -10,8 +11,8 @@ import Rect2 from '../../geometry/Rect2';
 
-export const makeFilledRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new RectangleBuilder(initialPoint, true);
+export const makeFilledRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, true, viewport);
 };
 
-export const makeOutlinedRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new RectangleBuilder(initialPoint, false);
+export const makeOutlinedRectangleBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new RectangleBuilder(initialPoint, false, viewport);
 };
@@ -22,3 +23,7 @@
 
-	public constructor(private readonly startPoint: StrokeDataPoint, private filled: boolean) {
+	public constructor(
+		private readonly startPoint: StrokeDataPoint,
+		private filled: boolean,
+		private viewport: Viewport,
+	) {
 		// Initially, the start and end points are the same.
@@ -34,7 +39,17 @@ this.endPoint = startPoint;
 	private buildPreview(): Stroke {
-		const startPoint = this.startPoint.pos;
-		const endPoint = this.endPoint.pos;
+		const canvasAngle = this.viewport.getRotationAngle();
+		const rotationMat = Mat33.zRotation(-canvasAngle);
+
+		// Adjust startPoint and endPoint such that applying [rotationMat] to them
+		// brings them to this.startPoint and this.endPoint.
+		const startPoint = rotationMat.inverse().transformVec2(this.startPoint.pos);
+		const endPoint = rotationMat.inverse().transformVec2(this.endPoint.pos);
+
+		const rect = Rect2.fromCorners(startPoint, endPoint);
 		const path = Path.fromRect(
-			Rect2.fromCorners(startPoint, endPoint),
+			rect,
 			this.filled ? null : this.endPoint.width,
+		).transformedBy(
+			// Rotate the canvas rectangle so that its rotation matches the screen
+			rotationMat
 		);
@@ -41,0 +56,0 @@

src/Editor.ts

@@ -394,2 +394,7 @@
 
+		// Don't render if the display has zero size.
+		if (this.display.width === 0 || this.display.height === 0) {
+			return;
+		}
+
 		// Draw a rectangle around the region that will be visible on save
@@ -396,0 +401,0 @@ const renderer = this.display.getDryInkRenderer();

src/EditorImage.test.ts

@@ -51,3 +51,3 @@ /* @jest-environment jsdom */
 		editor.rerender();
-		expect(renderer.renderedPathCount - emptyDocumentPathCount).toBe(1);
+		expect(renderer.renderedPathCount - emptyDocumentPathCount).toBeGreaterThanOrEqual(1);
 
@@ -54,0 +54,0 @@ // Should not be within objects after finished rendering

src/rendering/caching/RenderingCacheNode.ts

@@ -68,2 +68,7 @@
 
+			if (this.region.size.x === 0 || this.region.size.y === 0) {
+				console.warn('Cache element has zero size! Not generating children.');
+				return;
+			}
+
 			for (const rect of childRects) {
@@ -361,3 +366,3 @@ const child = new RenderingCacheNode(rect, this.cacheState);
 		if (this.instantiatedChildren.length !== cacheDivisionSize * cacheDivisionSize && this.instantiatedChildren.length !== 0) {
-			throw new Error('Repcheck: Wrong number of children');
+			throw new Error(`Repcheck: Wrong number of children. Got ${this.instantiatedChildren.length}`);
 		}
@@ -364,0 +369,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

937976

increased by0.28%

Lines of code

19821

increased by0.2%

No dependency changes