js-draw 1.7.2 → 1.9.0

package/dist/mjs/rendering/caching/CacheRecordManager.mjs

@@ -1,5 +1,4 @@
 import  CacheRecord  from './CacheRecord.mjs';
-const debugMode = false;
 export class CacheRecordManager {
     constructor(cacheProps) {
         // Fixed-size array: Cache blocks are assigned indicies into [cachedCanvases].
@@ -16,19 +15,19 @@ export class CacheRecordManager {
             const record = new CacheRecord(onDealloc, this.cacheState);
             record.setRenderingRegion(drawTo);
             this.cacheRecords.push(record);
-            if (debugMode) {
+            if (this.cacheState.debugMode) {
                 console.log('[Cache] Cache spaces used: ', this.cacheRecords.length, ' of ', this.maxCanvases);
             }
             return record;
         }
         else {
             const lru = this.getLeastRecentlyUsedRecord();
-            if (debugMode) {
+            if (this.cacheState.debugMode) {
                 console.log('[Cache] Re-alloc. Times allocated: ', lru.allocCount, '\nLast used cycle: ', lru.getLastUsedCycle(), '\nCurrent cycle: ', this.cacheState.currentRenderingCycle);
             }
             lru.realloc(onDealloc);
             lru.setRenderingRegion(drawTo);
-            if (debugMode) {
+            if (this.cacheState.debugMode) {
                 console.log('[Cache] Now re-alloc\'d. Last used cycle: ', lru.getLastUsedCycle());
                 console.assert(lru['cacheState'] === this.cacheState, '[Cache] Unequal cache states! cacheState should be a shared object!');
             }

package/dist/mjs/rendering/caching/RenderingCache.d.ts

@@ -9,4 +9,5 @@ export default class RenderingCache {
     constructor(cacheProps: CacheProps);
     render(screenRenderer: AbstractRenderer, image: ImageNode, viewport: Viewport): void;
     getDebugInfo(): string;
+    setIsDebugMode(debugMode: boolean): void;
 }

package/dist/mjs/rendering/caching/RenderingCache.mjs

@@ -8,6 +8,7 @@ export default class RenderingCache {
             props: cacheProps,
             currentRenderingCycle: 0,
             recordManager: this.recordManager,
+            debugMode: false,
         };
         this.recordManager.setSharedState(this.sharedState);
     }
@@ -44,4 +45,7 @@ export default class RenderingCache {
     getDebugInfo() {
         return this.recordManager.getDebugInfo();
     }
+    setIsDebugMode(debugMode) {
+        this.sharedState.debugMode = debugMode;
+    }
 }

package/dist/mjs/rendering/caching/RenderingCacheNode.mjs

@@ -1,10 +1,8 @@
 // A cache record with sub-nodes.
-import  { sortLeavesByZIndex }  from '../../image/EditorImage.mjs';
+import  { computeFirstIndexToRender, sortLeavesByZIndex }  from '../../image/EditorImage.mjs';
 import { Rect2, Color4 } from '@js-draw/math';
 // 3x3 divisions for each node.
 const cacheDivisionSize = 3;
-// True: Show rendering updates.
-const debugMode = false;
 export default class RenderingCacheNode {
     constructor(region, cacheState) {
         this.region = region;
@@ -161,8 +159,8 @@ export default class RenderingCacheNode {
             items.forEach(item => item.render(screenRenderer, viewport.visibleRect));
             return;
         }
-        if (debugMode) {
-            screenRenderer.drawRect(this.region, 0.5 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
+        if (this.cacheState.debugMode) {
+            screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.yellow });
         }
         // Could we render direclty from [this] or do we need to recurse?
         const couldRender = this.renderingWouldBeHighEnoughResolution(viewport);
@@ -197,7 +195,9 @@ export default class RenderingCacheNode {
                 }
                 let leafApproxRenderTime = 0;
                 for (const leaf of leavesByIds) {
-                    leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                    if (!tooSmallToRender(leaf.getBBox())) {
+                        leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                    }
                 }
                 // Is it worth it to render the items?
                 if (leafApproxRenderTime > this.cacheState.props.minProportionalRenderTimePerCache) {
@@ -233,26 +233,30 @@ export default class RenderingCacheNode {
                                     this.renderedMaxZIndex = zIndex;
                                 }
                             }
-                            if (debugMode) {
-                                screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
+                            if (this.cacheState.debugMode) {
+                                // Clay for adding new elements
+                                screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.clay });
                             }
                         }
                     }
-                    else if (debugMode) {
+                    else if (this.cacheState.debugMode) {
                         console.log('Decided on a full re-render. Reason: At least one of the following is false:', '\n leafIds.length > this.renderedIds.length: ', leafIds.length > this.renderedIds.length, '\n this.allRenderedIdsIn(leafIds): ', this.allRenderedIdsIn(leafIds), '\n this.renderedMaxZIndex !== null: ', this.renderedMaxZIndex !== null, '\n\nthis.rerenderedIds: ', this.renderedIds, ', leafIds: ', leafIds);
                     }
                     if (fullRerenderNeeded) {
                         thisRenderer = this.cachedRenderer.startRender();
                         thisRenderer.clear();
                         this.renderedMaxZIndex = null;
-                        for (const leaf of leaves) {
+                        const startIndex = computeFirstIndexToRender(leaves, this.region);
+                        for (let i = startIndex; i < leaves.length; i++) {
+                            const leaf = leaves[i];
                             const content = leaf.getContent();
                             this.renderedMaxZIndex ??= content.getZIndex();
                             this.renderedMaxZIndex = Math.max(this.renderedMaxZIndex, content.getZIndex());
                             leaf.render(thisRenderer, this.region);
                         }
-                        if (debugMode) {
-                            screenRenderer.drawRect(this.region, viewport.getSizeOfPixelOnCanvas(), { fill: Color4.red });
+                        if (this.cacheState.debugMode) {
+                            // Red for full rerender
+                            screenRenderer.drawRect(this.region, 3 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.red });
                         }
                     }
                     this.renderedIds = leafIds;
@@ -269,6 +273,10 @@ export default class RenderingCacheNode {
                         leaf.render(screenRenderer, this.region.intersection(viewport.visibleRect));
                     }
                     screenRenderer.endObject();
+                    if (this.cacheState.debugMode) {
+                        // Green for no cache needed render
+                        screenRenderer.drawRect(this.region, 2 * viewport.getSizeOfPixelOnCanvas(), { fill: Color4.green });
+                    }
                 }
             }
             else {

package/dist/mjs/rendering/caching/types.d.ts

@@ -16,4 +16,5 @@ export interface CacheState {
     currentRenderingCycle: number;
     props: CacheProps;
     recordManager: CacheRecordManager;
+    debugMode: boolean;
 }

package/dist/mjs/rendering/renderers/AbstractRenderer.d.ts

@@ -20,6 +20,11 @@ export default abstract class AbstractRenderer {
     private selfTransform;
     private transformStack;
     protected constructor(viewport: Viewport);
+    /**
+     * this.canvasToScreen, etc. should be used instead of the corresponding
+     * methods on `Viewport`, because the viewport may not accurately reflect
+     * what is rendered.
+     */
     protected getViewport(): Viewport;
     abstract displaySize(): Vec2;
     abstract clear(): void;
@@ -73,5 +78,10 @@ export default abstract class AbstractRenderer {
     getCanvasToScreenTransform(): Mat33;
     canvasToScreen(vec: Vec2): Vec2;
     getSizeOfCanvasPixelOnScreen(): number;
+    private visibleRectOverride;
+    /**
+     * @internal
+     */
+    overrideVisibleRect(rect: Rect2 | null): void;
     getVisibleRect(): Rect2;
 }

package/dist/mjs/rendering/renderers/AbstractRenderer.mjs

@@ -15,8 +15,11 @@ export default class AbstractRenderer {
         this.objectLevel = 0;
         this.currentPaths = null;
     }
-    // this.canvasToScreen, etc. should be used instead of the corresponding
-    // methods on Viewport.
+    /**
+     * this.canvasToScreen, etc. should be used instead of the corresponding
+     * methods on `Viewport`, because the viewport may not accurately reflect
+     * what is rendered.
+     */
     getViewport() { return this.viewport; }
     setDraftMode(_draftMode) { }
     flushPath() {
@@ -158,12 +161,18 @@ export default class AbstractRenderer {
     getSizeOfCanvasPixelOnScreen() {
         return this.getCanvasToScreenTransform().transformVec3(Vec2.unitX).length();
     }
+    /**
+     * @internal
+     */
+    overrideVisibleRect(rect) {
+        this.visibleRectOverride = rect;
+    }
     // Returns the region in canvas space that is visible within the viewport this
     // canvas is rendering to.
     //
     // Note that in some cases this might not be the same as the `visibleRect` given
     // to components in their `render` method.
     getVisibleRect() {
-        return this.viewport.visibleRect;
+        return this.visibleRectOverride ?? this.viewport.visibleRect;
     }
 }

package/dist/mjs/rendering/renderers/CanvasRenderer.mjs

@@ -77,7 +77,10 @@ export default class CanvasRenderer extends AbstractRenderer {
         return Vec2.of(this.ctx.canvas.clientWidth, this.ctx.canvas.clientHeight);
     }
     clear() {
+        this.ctx.save();
+        this.ctx.resetTransform();
         this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
+        this.ctx.restore();
     }
     beginPath(startPoint) {
         startPoint = this.canvasToScreen(startPoint);
@@ -144,7 +147,7 @@ export default class CanvasRenderer extends AbstractRenderer {
             return;
         }
         // If part of a huge object, it might be worth trimming the path
-        const visibleRect = this.getViewport().visibleRect;
+        const visibleRect = this.getVisibleRect();
         if (this.currentObjectBBox?.containsRect(visibleRect)) {
             // Try to trim/remove parts of the path outside of the bounding box.
             path = visualEquivalent(path, visibleRect);
@@ -184,7 +187,7 @@ export default class CanvasRenderer extends AbstractRenderer {
         if (!this.ignoringObject && clip) {
             // Don't clip if it would only remove content already trimmed by
             // the edge of the screen.
-            const clippedIsOutsideScreen = boundingBox.containsRect(this.getViewport().visibleRect);
+            const clippedIsOutsideScreen = boundingBox.containsRect(this.getVisibleRect());
             if (!clippedIsOutsideScreen) {
                 this.clipLevels.push(this.objectLevel);
                 this.ctx.save();

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

@@ -59,16 +59,6 @@ export default class SVGRenderer extends AbstractRenderer {
     drawPoints(...points: Point2[]): void;
     drawSVGElem(elem: SVGElement): void;
     isTooSmallToRender(_rect: Rect2): boolean;
-    private visibleRectOverride;
-    /**
-     * Overrides the visible region returned by `getVisibleRect`.
-     *
-     * This is useful when the `viewport`'s transform has been modified,
-     * for example, to compensate for storing part of the image's
-     * transformation in an SVG property.
-     */
-    private overrideVisibleRect;
-    getVisibleRect(): Rect2;
     /**
      * Creates a new SVG element and `SVGRenerer` with `width`, `height`, `viewBox`,
      * and other metadata attributes set for the given `Viewport`.

package/dist/mjs/rendering/renderers/SVGRenderer.mjs

@@ -36,7 +36,6 @@ export default class SVGRenderer extends AbstractRenderer {
         this.textContainer = null;
         this.textContainerTransform = null;
         this.textParentStyle = defaultTextStyle;
-        this.visibleRectOverride = null;
         this.clear();
         this.addStyleSheet();
     }
@@ -339,19 +338,6 @@ export default class SVGRenderer extends AbstractRenderer {
     isTooSmallToRender(_rect) {
         return false;
     }
-    /**
-     * Overrides the visible region returned by `getVisibleRect`.
-     *
-     * This is useful when the `viewport`'s transform has been modified,
-     * for example, to compensate for storing part of the image's
-     * transformation in an SVG property.
-     */
-    overrideVisibleRect(newRect) {
-        this.visibleRectOverride = newRect;
-    }
-    getVisibleRect() {
-        return this.visibleRectOverride ?? super.getVisibleRect();
-    }
     /**
      * Creates a new SVG element and `SVGRenerer` with `width`, `height`, `viewBox`,
      * and other metadata attributes set for the given `Viewport`.

package/dist/mjs/testing/startPinchGesture.d.ts

@@ -0,0 +1,14 @@
+import type Editor from '../Editor';
+import { Point2 } from '@js-draw/math';
+/**
+ * Creates two pointers and sends the touch {@link InputEvtType.PointerDownEvt}s for them.
+ *
+ * Returns an object that allows continuing or ending the gesture.
+ *
+ * `initialRotation` should be in radians.
+ */
+declare const startPinchGesture: (editor: Editor, center: Point2, initialDistance: number, initialRotation: number) => {
+    update(center: Point2, distance: number, rotation: number): void;
+    end(): void;
+};
+export default startPinchGesture;

package/dist/mjs/testing/startPinchGesture.mjs

@@ -0,0 +1,36 @@
+import { Mat33, Vec2 } from '@js-draw/math';
+import  sendTouchEvent  from './sendTouchEvent.mjs';
+import  { InputEvtType }  from '../inputEvents.mjs';
+/**
+ * Creates two pointers and sends the touch {@link InputEvtType.PointerDownEvt}s for them.
+ *
+ * Returns an object that allows continuing or ending the gesture.
+ *
+ * `initialRotation` should be in radians.
+ */
+const startPinchGesture = (editor, center, initialDistance, initialRotation) => {
+    const computeTouchPoints = (center, distance, rotation) => {
+        const halfDisplacement = Mat33.zRotation(rotation).transformVec2(Vec2.of(0, distance / 2));
+        const point1 = center.plus(halfDisplacement);
+        const point2 = center.minus(halfDisplacement);
+        return [point1, point2];
+    };
+    let [touchPoint1, touchPoint2] = computeTouchPoints(center, initialDistance, initialRotation);
+    let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, touchPoint1);
+    let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, touchPoint2, [firstPointer]);
+    return {
+        update(center, distance, rotation) {
+            const eventType = InputEvtType.PointerMoveEvt;
+            const [newPoint1, newPoint2] = computeTouchPoints(center, distance, rotation);
+            touchPoint1 = newPoint1;
+            touchPoint2 = newPoint2;
+            firstPointer = sendTouchEvent(editor, eventType, newPoint1, [secondPointer]);
+            secondPointer = sendTouchEvent(editor, eventType, newPoint2, [firstPointer]);
+        },
+        end() {
+            sendTouchEvent(editor, InputEvtType.PointerUpEvt, touchPoint1, [secondPointer]);
+            sendTouchEvent(editor, InputEvtType.PointerUpEvt, touchPoint2);
+        },
+    };
+};
+export default startPinchGesture;

package/dist/mjs/tools/PanZoom.d.ts

@@ -21,6 +21,9 @@ export default class PanZoom extends BaseTool {
     private editor;
     private mode;
     private transform;
+    private readonly initialRotationSnapAngle;
+    private readonly afterRotationStartSnapAngle;
+    private readonly pinchZoomStartThreshold;
     private startDist;
     private lastDist;
     private lastScreenCenter;
@@ -29,6 +32,7 @@ export default class PanZoom extends BaseTool {
     private initialTouchAngle;
     private initialViewportRotation;
     private isScaling;
+    private isRotating;
     private inertialScroller;
     private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);

package/dist/mjs/tools/PanZoom.mjs

@@ -65,12 +65,19 @@ export default class PanZoom extends BaseTool {
         this.editor = editor;
         this.mode = mode;
         this.transform = null;
+        // Constants
+        // initialRotationSnapAngle is larger than afterRotationStartSnapAngle to
+        // make it more difficult to start rotating (and easier to continue rotating).
+        this.initialRotationSnapAngle = 0.22; // radians
+        this.afterRotationStartSnapAngle = 0.07; // radians
+        this.pinchZoomStartThreshold = 1.08; // scale factor
         this.lastPointerDownTimestamp = 0;
         this.initialTouchAngle = 0;
         this.initialViewportRotation = 0;
         // Set to `true` only when scaling has started (if two fingers are down and have moved
         // far enough).
         this.isScaling = false;
+        this.isRotating = false;
         this.inertialScroller = null;
         this.velocity = null;
     }
@@ -112,6 +119,9 @@ export default class PanZoom extends BaseTool {
             this.initialTouchAngle = angle;
             this.initialViewportRotation = this.editor.viewport.getRotationAngle();
             this.isScaling = false;
+            // We're initially rotated if `initialViewportRotation` isn't near a multiple of pi/2.
+            // In other words, if sin(2 initialViewportRotation) is near zero.
+            this.isRotating = Math.abs(Math.sin(this.initialViewportRotation * 2)) > 1e-3;
             handlingGesture = true;
         }
         else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
@@ -168,7 +178,9 @@ export default class PanZoom extends BaseTool {
         const roundedFullRotation = Math.round(fullRotation / snapToMultipleOf) * snapToMultipleOf;
         // The maximum angle for which we snap the given angle to a multiple of
         // `snapToMultipleOf`.
-        const maxSnapAngle = 0.07;
+        // Use a smaller snap angle if already rotated (to avoid pinch zoom gestures from
+        // starting rotation).
+        const maxSnapAngle = this.isRotating ? this.afterRotationStartSnapAngle : this.initialRotationSnapAngle;
         // Snap the rotation
         if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
             fullRotation = roundedFullRotation;
@@ -191,6 +203,11 @@ export default class PanZoom extends BaseTool {
         else {
             deltaRotation = this.toSnappedRotationDelta(angle);
         }
+        // If any rotation, make a note of this (affects rotation snap
+        // angles).
+        if (Math.abs(deltaRotation) > 1e-8) {
+            this.isRotating = true;
+        }
         this.updateVelocity(screenCenter);
         let scaleFactor = 1;
         if (this.isScaling) {
@@ -199,7 +216,9 @@ export default class PanZoom extends BaseTool {
         else {
             const initialScaleFactor = dist / this.startDist;
             // Only start scaling if scaling done so far exceeds some threshold.
-            if (initialScaleFactor > 1.05 || initialScaleFactor < 0.95) {
+            const upperBound = this.pinchZoomStartThreshold;
+            const lowerBound = 1 / this.pinchZoomStartThreshold;
+            if (initialScaleFactor > upperBound || initialScaleFactor < lowerBound) {
                 scaleFactor = initialScaleFactor;
                 this.isScaling = true;
             }

package/dist/mjs/version.mjs

@@ -1,3 +1,3 @@
 export default {
-    number: '1.7.2',
+    number: '1.9.0',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.7.2",
+  "version": "1.9.0",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -55,7 +55,7 @@
   "license": "MIT",
   "private": false,
   "scripts": {
-    "dist-test": "npm run build && cd dist-test/test_imports && npm install && npm run test",
+    "dist-test": "cd dist-test/test_imports && npm install && npm run test",
     "dist": "npm run build && npm run dist-test",
     "build": "rm -rf ./dist/* && mkdir -p dist && build-tool build",
     "watch": "rm -rf ./dist/* && mkdir -p dist && build-tool watch",
@@ -64,7 +64,7 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.7.0",
+    "@js-draw/math": "^1.9.0",
     "@melloware/coloris": "0.21.0"
   },
   "devDependencies": {
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "e1677b6e40bd385e1ce40643fd10f064847adf5b"
+  "gitHead": "e824c37e9f216852cf096976e3a74fb4f177ead3"
 }

package/src/Editor.scss

@@ -118,6 +118,8 @@
 	text-align: center;
 	font-size: 2em;
 
+	text-shadow: 0px 0px 1px var(--background-color-1);
+
 	bottom: 0;
 	left: 0;
 	right: 0;