js-draw 0.7.2 → 0.8.0

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) {
@@ -214,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/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.2",
+	"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/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,
 			};
 		});
 	}