js-draw 0.7.1 → 0.8.0

package/dist/src/math/Path.js

@@ -195,6 +195,45 @@ export default class Path {
             ...other.parts,
         ]);
     }
+    getEndPoint() {
+        if (this.parts.length === 0) {
+            return this.startPoint;
+        }
+        const lastPart = this.parts[this.parts.length - 1];
+        if (lastPart.kind === PathCommandType.QuadraticBezierTo || lastPart.kind === PathCommandType.CubicBezierTo) {
+            return lastPart.endPoint;
+        }
+        else {
+            return lastPart.point;
+        }
+    }
+    roughlyIntersects(rect, strokeWidth = 0) {
+        if (this.parts.length === 0) {
+            return rect.containsPoint(this.startPoint);
+        }
+        const isClosed = this.startPoint.eq(this.getEndPoint());
+        if (isClosed && strokeWidth == 0) {
+            return this.closedRoughlyIntersects(rect);
+        }
+        if (rect.containsRect(this.bbox)) {
+            return true;
+        }
+        // Does the rectangle intersect the bounding boxes of any of this' parts?
+        let startPoint = this.startPoint;
+        for (const part of this.parts) {
+            const bbox = Path.computeBBoxForSegment(startPoint, part).grownBy(strokeWidth);
+            if (part.kind === PathCommandType.LineTo || part.kind === PathCommandType.MoveTo) {
+                startPoint = part.point;
+            }
+            else {
+                startPoint = part.endPoint;
+            }
+            if (rect.intersects(bbox)) {
+                return true;
+            }
+        }
+        return false;
+    }
     // Treats this as a closed path and returns true if part of `rect` is roughly within
     // this path's interior.
     //

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

@@ -64,6 +64,8 @@ export default class CanvasRenderer extends AbstractRenderer {
         if (style.stroke) {
             this.ctx.strokeStyle = style.stroke.color.toHexString();
             this.ctx.lineWidth = this.getSizeOfCanvasPixelOnScreen() * style.stroke.width;
+            this.ctx.lineCap = 'round';
+            this.ctx.lineJoin = 'round';
             this.ctx.stroke();
         }
         this.ctx.closePath();

package/dist/src/rendering/renderers/SVGRenderer.d.ts

@@ -6,6 +6,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
+export declare const renderedStylesheetId = "js-draw-style-sheet";
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
     private sanitize;
@@ -14,6 +15,7 @@ export default class SVGRenderer extends AbstractRenderer {
     private objectElems;
     private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport, sanitize?: boolean);
+    private addStyleSheet;
     setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
     clear(): void;

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

@@ -4,6 +4,7 @@ import { toRoundedString } from '../../math/rounding';
 import { Vec2 } from '../../math/Vec2';
 import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader';
 import AbstractRenderer from './AbstractRenderer';
+export const renderedStylesheetId = 'js-draw-style-sheet';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
     // Renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
@@ -18,6 +19,21 @@ export default class SVGRenderer extends AbstractRenderer {
         this.textContainer = null;
         this.textContainerTransform = null;
         this.clear();
+        this.addStyleSheet();
+    }
+    addStyleSheet() {
+        if (!this.elem.querySelector(`#${renderedStylesheetId}`)) {
+            // Default to rounded strokes.
+            const styleSheet = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+            styleSheet.innerHTML = `
+				path {
+					stroke-linecap: round;
+					stroke-linejoin: round;
+				}
+			`.replace(/\s+/g, '');
+            styleSheet.setAttribute('id', renderedStylesheetId);
+            this.elem.appendChild(styleSheet);
+        }
     }
     // Sets an attribute on the root SVG element.
     setRootSVGAttribute(name, value) {
@@ -83,11 +99,14 @@ export default class SVGRenderer extends AbstractRenderer {
         }
         this.lastPathString.push(path.toString());
     }
-    // Apply [elemTransform] to [elem].
-    transformFrom(elemTransform, elem, inCanvasSpace = false) {
+    // Apply [elemTransform] to [elem]. Uses both a `matrix` and `.x`, `.y` properties if `setXY` is true.
+    // Otherwise, just uses a `matrix`.
+    transformFrom(elemTransform, elem, inCanvasSpace = false, setXY = true) {
         let transform = !inCanvasSpace ? this.getCanvasToScreenTransform().rightMul(elemTransform) : elemTransform;
         const translation = transform.transformVec2(Vec2.zero);
-        transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+        if (setXY) {
+            transform = transform.rightMul(Mat33.translation(translation.times(-1)));
+        }
         if (!transform.eq(Mat33.identity)) {
             elem.style.transform = `matrix(
 				${transform.a1}, ${transform.b1},
@@ -98,8 +117,10 @@ export default class SVGRenderer extends AbstractRenderer {
         else {
             elem.style.transform = '';
         }
-        elem.setAttribute('x', `${toRoundedString(translation.x)}`);
-        elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+        if (setXY) {
+            elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+            elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+        }
     }
     drawText(text, transform, style) {
         var _a;
@@ -120,7 +141,10 @@ export default class SVGRenderer extends AbstractRenderer {
         if (!this.textContainer) {
             const container = document.createElementNS(svgNameSpace, 'text');
             container.appendChild(document.createTextNode(text));
-            this.transformFrom(transform, container, true);
+            // Don't set .x/.y properties (just use .style.transform).
+            // Child nodes aren't translated by .x/.y properties, but are by .style.transform.
+            const setXY = false;
+            this.transformFrom(transform, container, true, setXY);
             applyTextStyles(container, style);
             this.elem.appendChild(container);
             (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(container);
@@ -133,8 +157,12 @@ export default class SVGRenderer extends AbstractRenderer {
             const elem = document.createElementNS(svgNameSpace, 'tspan');
             elem.appendChild(document.createTextNode(text));
             this.textContainer.appendChild(elem);
+            // Make .x/.y relative to the parent.
             transform = this.textContainerTransform.inverse().rightMul(transform);
-            this.transformFrom(transform, elem, true);
+            // .style.transform does nothing to tspan elements. As such, we need to set x/y:
+            const translation = transform.transformVec2(Vec2.zero);
+            elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+            elem.setAttribute('y', `${toRoundedString(translation.y)}`);
             applyTextStyles(elem, style);
         }
     }
@@ -202,6 +230,10 @@ export default class SVGRenderer extends AbstractRenderer {
         if (this.sanitize) {
             return;
         }
+        // Don't add multiple copies of the default stylesheet.
+        if (elem.tagName.toLowerCase() === 'style' && elem.getAttribute('id') === renderedStylesheetId) {
+            return;
+        }
         this.elem.appendChild(elem.cloneNode(true));
     }
     isTooSmallToRender(_rect) {

package/dist/src/toolbar/localization.d.ts

@@ -6,6 +6,7 @@ export interface ToolbarLocalization {
     linePen: string;
     arrowPen: string;
     freehandPen: string;
+    pressureSensitiveFreehandPen: string;
     selectObjectType: string;
     colorLabel: string;
     pen: string;

package/dist/src/toolbar/localization.js

@@ -19,6 +19,7 @@ export const defaultToolbarLocalization = {
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
     touchPanning: 'Touchscreen panning',
     freehandPen: 'Freehand',
+    pressureSensitiveFreehandPen: 'Freehand (pressure sensitive)',
     arrowPen: 'Arrow',
     linePen: 'Line',
     outlinedRectanglePen: 'Outlined rectangle',

package/dist/src/toolbar/widgets/PenToolWidget.js

@@ -1,5 +1,6 @@
 import { makeArrowBuilder } from '../../components/builders/ArrowBuilder';
 import { makeFreehandLineBuilder } from '../../components/builders/FreehandLineBuilder';
+import { makePressureSensitiveFreehandLineBuilder } from '../../components/builders/PressureSensitiveFreehandLineBuilder';
 import { makeLineBuilder } from '../../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../../components/builders/RectangleBuilder';
 import { EditorEventType } from '../../types';
@@ -13,6 +14,10 @@ export default class PenToolWidget extends BaseToolWidget {
         this.updateInputs = () => { };
         // Default pen types
         this.penTypes = [
+            {
+                name: localization.pressureSensitiveFreehandPen,
+                factory: makePressureSensitiveFreehandLineBuilder,
+            },
             {
                 name: localization.freehandPen,
                 factory: makeFreehandLineBuilder,
@@ -50,7 +55,7 @@ export default class PenToolWidget extends BaseToolWidget {
     }
     createIcon() {
         const strokeFactory = this.tool.getStrokeFactory();
-        if (strokeFactory === makeFreehandLineBuilder) {
+        if (strokeFactory === makeFreehandLineBuilder || strokeFactory === makePressureSensitiveFreehandLineBuilder) {
             // Use a square-root scale to prevent the pen's tip from overflowing.
             const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
             const color = this.tool.getColor();

package/dist/src/tools/Pen.d.ts

@@ -11,10 +11,10 @@ export interface PenStyle {
 export default class Pen extends BaseTool {
     private editor;
     private style;
+    private builderFactory;
     protected builder: ComponentBuilder | null;
-    protected builderFactory: ComponentBuilderFactory;
     private lastPoint;
-    constructor(editor: Editor, description: string, style: PenStyle);
+    constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
     private getPressureMultiplier;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
     protected previewStroke(): void;

package/dist/src/tools/Pen.js

@@ -4,12 +4,12 @@ import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuil
 import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
 export default class Pen extends BaseTool {
-    constructor(editor, description, style) {
+    constructor(editor, description, style, builderFactory = makeFreehandLineBuilder) {
         super(editor.notifier, description);
         this.editor = editor;
         this.style = style;
+        this.builderFactory = builderFactory;
         this.builder = null;
-        this.builderFactory = makeFreehandLineBuilder;
         this.lastPoint = null;
     }
     getPressureMultiplier() {

package/dist/src/tools/SelectionTool/Selection.d.ts

@@ -18,6 +18,7 @@ export default class Selection {
     private selectedElems;
     private container;
     private backgroundElem;
+    private hasParent;
     constructor(startPoint: Point2, editor: Editor);
     getTransform(): Mat33;
     get preTransformRegion(): Rect2;

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

@@ -30,6 +30,7 @@ export default class Selection {
         this.transform = Mat33.identity;
         this.transformCommands = [];
         this.selectedElems = [];
+        this.hasParent = true;
         this.targetHandle = null;
         this.backgroundDragging = false;
         this.originalRegion = new Rect2(startPoint.x, startPoint.y, 0, 0);
@@ -96,7 +97,7 @@ export default class Selection {
     // Applies, previews, but doesn't finalize the given transformation.
     setTransform(transform, preview = true) {
         this.transform = transform;
-        if (preview) {
+        if (preview && this.hasParent) {
             this.previewTransformCmds();
             this.scrollTo();
         }
@@ -190,6 +191,10 @@ export default class Selection {
     }
     // @internal
     updateUI() {
+        // Don't update old selections.
+        if (!this.hasParent) {
+            return;
+        }
         // marginLeft, marginTop: Display relative to the top left of the selection overlay.
         // left, top don't work for this.
         this.backgroundElem.style.marginLeft = `${this.screenRegion.topLeft.x}px`;
@@ -267,6 +272,7 @@ export default class Selection {
             this.container.remove();
         }
         elem.appendChild(this.container);
+        this.hasParent = true;
     }
     setToPoint(point) {
         this.originalRegion = this.originalRegion.grownToPoint(point);
@@ -277,6 +283,7 @@ export default class Selection {
             this.container.remove();
         }
         this.originalRegion = Rect2.empty;
+        this.hasParent = false;
     }
     setSelectedObjects(objects, bbox) {
         this.originalRegion = bbox;

package/dist/src/tools/TextTool.js

@@ -119,7 +119,7 @@ export default class TextTool extends BaseTool {
         this.textInputElem = document.createElement('textarea');
         this.textInputElem.value = initialText;
         this.textInputElem.style.display = 'inline-block';
-        this.textTargetPosition = textCanvasPos;
+        this.textTargetPosition = this.editor.viewport.roundPoint(textCanvasPos);
         this.textRotation = -this.editor.viewport.getRotationAngle();
         this.textScale = Vec2.of(1, 1).times(this.editor.viewport.getSizeOfPixelOnCanvas());
         this.updateTextInput();
@@ -172,6 +172,8 @@ export default class TextTool extends BaseTool {
             const testRegion = Rect2.fromCorners(canvasPos.minus(halfTestRegionSize), canvasPos.plus(halfTestRegionSize));
             const targetNodes = this.editor.image.getElementsIntersectingRegion(testRegion);
             const targetTextNodes = targetNodes.filter(node => node instanceof TextComponent);
+            // End any TextNodes we're currently editing.
+            this.flushInput();
             if (targetTextNodes.length > 0) {
                 const targetNode = targetTextNodes[targetTextNodes.length - 1];
                 this.setTextStyle(targetNode.getTextStyle());
@@ -227,7 +229,7 @@ export default class TextTool extends BaseTool {
     }
     setTextStyle(style) {
         // Copy the style — we may change parts of it.
-        this.textStyle = Object.assign({}, style);
+        this.textStyle = Object.assign(Object.assign({}, style), { renderingStyle: Object.assign({}, style.renderingStyle) });
         this.dispatchUpdateEvent();
     }
 }

package/dist/src/tools/ToolController.js

@@ -11,6 +11,7 @@ import PipetteTool from './PipetteTool';
 import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
+import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -25,7 +26,7 @@ export default class ToolController {
             primaryPenTool,
             new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
             // Highlighter-like pen with width=64
-            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }),
+            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }, makePressureSensitiveFreehandLineBuilder),
             new Eraser(editor, localization.eraserTool),
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.7.1",
+	"version": "0.8.0",
 	"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/SVGLoader.ts

@@ -218,6 +218,7 @@ export default class SVGLoader implements ImageLoader {
 			} else if (child.nodeType === Node.ELEMENT_NODE) {
 				const subElem = child as SVGElement;
 				if (subElem.tagName.toLowerCase() === 'tspan') {
+					// FIXME: tspan's (x, y) components are absolute, not relative to the parent.
 					contentList.push(this.makeText(subElem as SVGTSpanElement));
 				} else {
 					throw new Error(`Unrecognized text child element: ${subElem}`);

package/src/components/Stroke.ts

@@ -61,7 +61,7 @@ export default class Stroke extends AbstractComponent {
 				}
 
 				const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
-				if (muchBiggerThanVisible && !part.path.closedRoughlyIntersects(visibleRect)) {
+				if (muchBiggerThanVisible && !part.path.roughlyIntersects(visibleRect, part.style.stroke?.width)) {
 					continue;
 				}
 			}
@@ -87,7 +87,20 @@ export default class Stroke extends AbstractComponent {
 		// Update each part
 		this.parts = this.parts.map((part) => {
 			const newPath = part.path.transformedBy(affineTransfm);
-			const newBBox = this.bboxForPart(newPath.bbox, part.style);
+			const newStyle = {
+				...part.style,
+				stroke: part.style.stroke ? {
+					...part.style.stroke,
+				} : undefined,
+			};
+
+			// Approximate the scale factor.
+			if (newStyle.stroke) {
+				const scaleFactor = affineTransfm.getScaleFactor();
+				newStyle.stroke.width *= scaleFactor;
+			}
+
+			const newBBox = this.bboxForPart(newPath.bbox, newStyle);
 
 			if (isFirstPart) {
 				this.contentBBox = newBBox;
@@ -100,7 +113,7 @@ export default class Stroke extends AbstractComponent {
 				path: newPath,
 				startPoint: newPath.startPoint,
 				commands: newPath.parts,
-				style: part.style,
+				style: newStyle,
 			};
 		});
 	}