js-draw 0.9.0 → 0.9.1

package/dist/src/Editor.d.ts

@@ -197,7 +197,9 @@ export declare class Editor {
     addStyleSheet(content: string): HTMLStyleElement;
     sendKeyboardEvent(eventType: InputEvtType.KeyPressEvent | InputEvtType.KeyUpEvent, key: string, ctrlKey?: boolean, altKey?: boolean): void;
     sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
+    toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp'): string;
     toSVG(): SVGElement;
+    private renderAllWithTransform;
     loadFrom(loader: ImageLoader): Promise<void>;
     getImportExportRect(): Rect2;
     setImportExportRect(imageRect: Rect2): Command;

package/dist/src/Editor.js

@@ -43,6 +43,7 @@ import Mat33 from './math/Mat33';
 import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
+import CanvasRenderer from './rendering/renderers/CanvasRenderer';
 // { @inheritDoc Editor! }
 export class Editor {
     /**
@@ -626,17 +627,29 @@ export class Editor {
             current: mainPointer,
         });
     }
+    // Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
+    // If `format` is not `image/png`, a PNG image URL may still be returned (as in the
+    // case of `HTMLCanvasElement::toDataURL`).
+    //
+    // The export resolution is the same as the size of the drawing canvas.
+    toDataURL(format = 'image/png') {
+        const canvas = document.createElement('canvas');
+        const resolution = this.importExportViewport.getResolution();
+        canvas.width = resolution.x;
+        canvas.height = resolution.y;
+        const ctx = canvas.getContext('2d');
+        const renderer = new CanvasRenderer(ctx, this.importExportViewport);
+        // Render everything with no transform (0,0) should be (0,0) in the output image
+        this.renderAllWithTransform(renderer, this.importExportViewport, Mat33.identity);
+        const dataURL = canvas.toDataURL(format);
+        return dataURL;
+    }
     toSVG() {
         const importExportViewport = this.importExportViewport;
         const svgNameSpace = 'http://www.w3.org/2000/svg';
         const result = document.createElementNS(svgNameSpace, 'svg');
         const renderer = new SVGRenderer(result, importExportViewport);
-        const origTransform = importExportViewport.canvasToScreenTransform;
-        // Reset the transform to ensure that (0, 0) is (0, 0)
-        importExportViewport.resetTransform(Mat33.identity);
-        // Render **all** elements.
-        this.image.renderAll(renderer);
-        importExportViewport.resetTransform(origTransform);
+        this.renderAllWithTransform(renderer, importExportViewport);
         // Just show the main region
         const rect = importExportViewport.visibleRect;
         result.setAttribute('viewBox', [rect.x, rect.y, rect.w, rect.h].map(part => toRoundedString(part)).join(' '));
@@ -649,6 +662,18 @@ export class Editor {
         result.setAttribute('xmlns', svgNameSpace);
         return result;
     }
+    // Renders everything in this' image to `renderer`, but first transforming the given `viewport`
+    // such that its transform is `transform`. The given `viewport`'s transform is restored before this method
+    // returns.
+    //
+    // For example, rendering with `transform = Mat33.identity` *sets* `viewport`'s transform to `Mat33.identity`,
+    // renders everything in this' image to `renderer`, then restores `viewport`'s transform to whatever it was before.
+    renderAllWithTransform(renderer, viewport, transform = Mat33.identity) {
+        const origTransform = this.importExportViewport.canvasToScreenTransform;
+        viewport.resetTransform(transform);
+        this.image.renderAll(renderer);
+        viewport.resetTransform(origTransform);
+    }
     loadFrom(loader) {
         return __awaiter(this, void 0, void 0, function* () {
             this.showLoadingWarning(0);

package/dist/src/Viewport.js

@@ -103,8 +103,8 @@ export class Viewport {
         }
         // Represent as k 10ⁿ for some n, k ∈ ℤ.
         const decimalComponent = Math.pow(10, Math.floor(Math.log10(Math.abs(scaleRatio))));
-        const roundAnountFactor = Math.pow(2, roundAmount);
-        scaleRatio = Math.round(scaleRatio / decimalComponent * roundAnountFactor) / roundAnountFactor * decimalComponent;
+        const roundAmountFactor = Math.pow(2, roundAmount);
+        scaleRatio = Math.round(scaleRatio / decimalComponent * roundAmountFactor) / roundAmountFactor * decimalComponent;
         return scaleRatio;
     }
     // Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.

package/dist/src/components/builders/LineBuilder.js

@@ -37,6 +37,10 @@ export default class LineBuilder {
                         kind: PathCommandType.LineTo,
                         point: endPoint.minus(scaledEndNormal),
                     },
+                    {
+                        kind: PathCommandType.LineTo,
+                        point: startPoint.minus(scaledStartNormal),
+                    },
                 ],
                 style: {
                     fill: this.startPoint.color,

package/dist/src/components/util/StrokeSmoother.js

@@ -167,7 +167,7 @@ export class StrokeSmoother {
         if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
             // Position the control point closer to the first -- the connecting
             // segment will be roughly a line.
-            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 3));
+            controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
         }
         console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');
         console.assert(!controlPoint.eq(segmentEnd, 1e-11), 'Control and end points are equal!');

package/dist/src/rendering/renderers/SVGRenderer.js

@@ -79,7 +79,12 @@ export default class SVGRenderer extends AbstractRenderer {
         const pathElem = document.createElementNS(svgNameSpace, 'path');
         pathElem.setAttribute('d', this.lastPathString.join(' '));
         const style = this.lastPathStyle;
-        pathElem.setAttribute('fill', style.fill.toHexString());
+        if (style.fill.a > 0) {
+            pathElem.setAttribute('fill', style.fill.toHexString());
+        }
+        else {
+            pathElem.setAttribute('fill', 'none');
+        }
         if (style.stroke) {
             pathElem.setAttribute('stroke', style.stroke.color.toHexString());
             pathElem.setAttribute('stroke-width', style.stroke.width.toString());

package/dist/src/tools/SelectionTool/Selection.js

@@ -287,7 +287,7 @@ export default class Selection {
     }
     setSelectedObjects(objects, bbox) {
         this.originalRegion = bbox;
-        this.selectedElems = objects;
+        this.selectedElems = objects.filter(object => object.isSelectable());
         this.updateUI();
     }
     getSelectedObjects() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.9.0",
+	"version": "0.9.1",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Editor.ts

@@ -27,7 +27,7 @@ import EventDispatcher from './EventDispatcher';
 import { Point2, Vec2 } from './math/Vec2';
 import Vec3 from './math/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
-import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import Display, { RenderingMode } from './rendering/Display';
 import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
@@ -39,6 +39,7 @@ import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
 import IconProvider from './toolbar/IconProvider';
 import { toRoundedString } from './math/rounding';
+import CanvasRenderer from './rendering/renderers/CanvasRenderer';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -823,20 +824,36 @@ export class Editor {
 		});
 	}
 
+	// Get a data URL (e.g. as produced by `HTMLCanvasElement::toDataURL`).
+	// If `format` is not `image/png`, a PNG image URL may still be returned (as in the
+	// case of `HTMLCanvasElement::toDataURL`).
+	//
+	// The export resolution is the same as the size of the drawing canvas.
+	public toDataURL(format: 'image/png'|'image/jpeg'|'image/webp' = 'image/png'): string {
+		const canvas = document.createElement('canvas');
+		
+		const resolution = this.importExportViewport.getResolution();
+
+		canvas.width = resolution.x;
+		canvas.height = resolution.y;
+
+		const ctx = canvas.getContext('2d')!;
+		const renderer = new CanvasRenderer(ctx, this.importExportViewport);
+
+		// Render everything with no transform (0,0) should be (0,0) in the output image
+		this.renderAllWithTransform(renderer, this.importExportViewport, Mat33.identity);
+
+		const dataURL = canvas.toDataURL(format);
+		return dataURL;
+	}
+
 	public toSVG(): SVGElement {
 		const importExportViewport = this.importExportViewport;
 		const svgNameSpace = 'http://www.w3.org/2000/svg';
 		const result = document.createElementNS(svgNameSpace, 'svg');
 		const renderer = new SVGRenderer(result, importExportViewport);
 
-		const origTransform = importExportViewport.canvasToScreenTransform;
-		// Reset the transform to ensure that (0, 0) is (0, 0)
-		importExportViewport.resetTransform(Mat33.identity);
-
-		// Render **all** elements.
-		this.image.renderAll(renderer);
-
-		importExportViewport.resetTransform(origTransform);
+		this.renderAllWithTransform(renderer, importExportViewport);
 
 		// Just show the main region
 		const rect = importExportViewport.visibleRect;
@@ -854,6 +871,23 @@ export class Editor {
 		return result;
 	}
 
+	// Renders everything in this' image to `renderer`, but first transforming the given `viewport`
+	// such that its transform is `transform`. The given `viewport`'s transform is restored before this method
+	// returns.
+	//
+	// For example, rendering with `transform = Mat33.identity` *sets* `viewport`'s transform to `Mat33.identity`,
+	// renders everything in this' image to `renderer`, then restores `viewport`'s transform to whatever it was before.
+	private renderAllWithTransform(
+		renderer: AbstractRenderer, viewport: Viewport, transform: Mat33 = Mat33.identity
+	): void {
+		const origTransform = this.importExportViewport.canvasToScreenTransform;
+		viewport.resetTransform(transform);
+
+		this.image.renderAll(renderer);
+
+		viewport.resetTransform(origTransform);
+	}
+
 	public async loadFrom(loader: ImageLoader) {
 		this.showLoadingWarning(0);
 		this.display.setDraftMode(true);

package/src/Viewport.ts

@@ -190,8 +190,8 @@ export class Viewport {
 
 		// Represent as k 10ⁿ for some n, k ∈ ℤ.
 		const decimalComponent = 10 ** Math.floor(Math.log10(Math.abs(scaleRatio)));
-		const roundAnountFactor = 2 ** roundAmount;
-		scaleRatio = Math.round(scaleRatio / decimalComponent * roundAnountFactor) / roundAnountFactor * decimalComponent;
+		const roundAmountFactor = 2 ** roundAmount;
+		scaleRatio = Math.round(scaleRatio / decimalComponent * roundAmountFactor) / roundAmountFactor * decimalComponent;
 
 		return scaleRatio;
 	}

package/src/components/builders/LineBuilder.ts

@@ -51,6 +51,10 @@ export default class LineBuilder implements ComponentBuilder {
 						kind: PathCommandType.LineTo,
 						point: endPoint.minus(scaledEndNormal),
 					},
+					{
+						kind: PathCommandType.LineTo,
+						point: startPoint.minus(scaledStartNormal),
+					},
 				],
 				style: {
 					fill: this.startPoint.color,

package/src/components/util/StrokeSmoother.ts

@@ -238,7 +238,7 @@ export class StrokeSmoother {
 		if (!controlPoint || segmentStart.eq(controlPoint) || segmentEnd.eq(controlPoint)) {
 			// Position the control point closer to the first -- the connecting
 			// segment will be roughly a line.
-			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 3));
+			controlPoint = segmentStart.plus(enteringVec.times(startEndDist / 4));
 		}
 
 		console.assert(!segmentStart.eq(controlPoint, 1e-11), 'Start and control points are equal!');

package/src/rendering/renderers/SVGRenderer.ts

@@ -94,7 +94,11 @@ export default class SVGRenderer extends AbstractRenderer {
 		pathElem.setAttribute('d', this.lastPathString.join(' '));
 
 		const style = this.lastPathStyle;
-		pathElem.setAttribute('fill', style.fill.toHexString());
+		if (style.fill.a > 0) {
+			pathElem.setAttribute('fill', style.fill.toHexString());
+		} else {
+			pathElem.setAttribute('fill', 'none');
+		}
 
 		if (style.stroke) {
 			pathElem.setAttribute('stroke', style.stroke.color.toHexString());

package/src/tools/SelectionTool/Selection.ts

@@ -453,7 +453,7 @@ export default class Selection {
 
 	public setSelectedObjects(objects: AbstractComponent[], bbox: Rect2) {
 		this.originalRegion = bbox;
-		this.selectedElems = objects;
+		this.selectedElems = objects.filter(object => object.isSelectable());
 		this.updateUI();
 	}