js-draw 0.12.0 → 0.13.1

package/dist/src/rendering/Display.js

@@ -1,17 +1,3 @@
-/**
- * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
- *
- * @example
- * ```
- * const editor = new Editor(document.body);
- * const w = editor.display.width;
- * const h = editor.display.height;
- * const center = Vec2.of(w / 2, h / 2);
- * const colorAtCenter = editor.display.getColorAt(center);
- * ```
- *
- * @packageDocumentation
- */
 import CanvasRenderer from './renderers/CanvasRenderer';
 import { EditorEventType } from '../types';
 import DummyRenderer from './renderers/DummyRenderer';
@@ -25,6 +11,18 @@ export var RenderingMode;
     RenderingMode[RenderingMode["CanvasRenderer"] = 1] = "CanvasRenderer";
     // SVGRenderer is not supported by the main display
 })(RenderingMode || (RenderingMode = {}));
+/**
+ * Handles `HTMLCanvasElement`s (or other drawing surfaces if being used) used to display the editor's contents.
+ *
+ * @example
+ * ```
+ * const editor = new Editor(document.body);
+ * const w = editor.display.width;
+ * const h = editor.display.height;
+ * const center = Vec2.of(w / 2, h / 2);
+ * const colorAtCenter = editor.display.getColorAt(center);
+ * ```
+ */
 export default class Display {
     /** @internal */
     constructor(editor, mode, parent) {

package/dist/src/rendering/lib.d.ts

@@ -0,0 +1,3 @@
+export { default as AbstractRenderer } from './renderers/AbstractRenderer';
+export { default as DummyRenderer } from './renderers/DummyRenderer';
+export { default as Display } from './Display';

package/dist/src/rendering/lib.js

@@ -0,0 +1,3 @@
+export { default as AbstractRenderer } from './renderers/AbstractRenderer';
+export { default as DummyRenderer } from './renderers/DummyRenderer';
+export { default as Display } from './Display';

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

@@ -1,6 +1,6 @@
-// Renderer that outputs nothing. Useful for automated tests.
 import { Vec2 } from '../../math/Vec2';
 import AbstractRenderer from './AbstractRenderer';
+// Renderer that outputs almost nothing. Useful for automated tests.
 export default class DummyRenderer extends AbstractRenderer {
     constructor(viewport) {
         super(viewport);
@@ -17,7 +17,7 @@ export default class DummyRenderer extends AbstractRenderer {
     }
     displaySize() {
         // Do we have a stored viewport size?
-        const viewportSize = this.getViewport().getResolution();
+        const viewportSize = this.getViewport().getScreenRectSize();
         // Don't use a 0x0 viewport — DummyRenderer is often used
         // for tests that run without a display, so pretend we have a
         // reasonable-sized display.

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

@@ -31,6 +31,10 @@ export default class SVGRenderer extends AbstractRenderer {
 					stroke-linecap: round;
 					stroke-linejoin: round;
 				}
+
+				text {
+					white-space: pre;
+				}
 			`.replace(/\s+/g, '');
             styleSheet.setAttribute('id', renderedStylesheetId);
             this.elem.appendChild(styleSheet);

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

@@ -21,7 +21,7 @@ export default class IconProvider {
     makeRotationLockIcon(): IconType;
     makeInsertImageIcon(): IconType;
     makeTextIcon(textStyle: TextStyle): IconType;
-    makePenIcon(tipThickness: number, color: string | Color4, roundedTip?: boolean): IconType;
+    makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
     makePipetteIcon(color?: Color4): IconType;
     makeResizeViewportIcon(): IconType;

package/dist/src/toolbar/IconProvider.js

@@ -30,7 +30,7 @@ export default class IconProvider {
     makeUndoIcon() {
         return this.makeRedoIcon(true);
     }
-    // @param mirror - reflect across the x-axis @internal
+    // @param mirror - reflect across the x-axis. This parameter is internal.
     // @returns a redo icon.
     makeRedoIcon(mirror = false) {
         const icon = document.createElementNS(svgNamespace, 'svg');
@@ -336,45 +336,106 @@ export default class IconProvider {
         icon.appendChild(textNode);
         return icon;
     }
-    makePenIcon(tipThickness, color, roundedTip) {
+    makePenIcon(strokeSize, color, rounded) {
         if (color instanceof Color4) {
             color = color.toHexString();
         }
         const icon = document.createElementNS(svgNamespace, 'svg');
         icon.setAttribute('viewBox', '0 0 100 100');
-        const halfThickness = tipThickness / 2;
-        // Draw a pen-like shape
-        const penTipLeft = 50 - halfThickness;
-        const penTipRight = 50 + halfThickness;
-        let tipCenterPrimaryPath = `L${penTipLeft},95 L${penTipRight},90`;
-        let tipCenterBackgroundPath = `L${penTipLeft},85 L${penTipRight},83`;
-        if (roundedTip) {
-            tipCenterPrimaryPath = `L${penTipLeft},95 q${halfThickness},10 ${2 * halfThickness},-5`;
-            tipCenterBackgroundPath = `L${penTipLeft},87 q${halfThickness},10 ${2 * halfThickness},-3`;
+        const tipThickness = strokeSize / 2;
+        const inkTipPath = `
+			M ${15 - tipThickness},${80 - tipThickness}
+			  ${15 - tipThickness},${80 + tipThickness}
+			  30,83
+			  15,65
+			Z
+		`;
+        const trailStartEndY = 80 + tipThickness;
+        const inkTrailPath = `
+			m ${15 - tipThickness * 1.1},${trailStartEndY}
+			c 35,10 55,15 60,30
+			l ${35 + tipThickness * 1.2},${-10 - tipThickness}
+			C 80.47,98.32 50.5,${90 + tipThickness} 20,${trailStartEndY} Z
+		`;
+        const colorBubblePath = `
+			M 72.45,35.67
+			A 10,15 41.8 0 1 55,40.2 10,15 41.8 0 1 57.55,22.3 10,15 41.8 0 1 75,17.8 10,15 41.8 0 1 72.5,35.67
+			Z
+		`;
+        let gripMainPath = 'M 85,-25 25,35 h 10 v 10 h 10 v 10 h 10 v 10 h 10 l -5,10 60,-60 z';
+        let gripShadow1Path = 'M 25,35 H 35 L 90,-15 85,-25 Z';
+        let gripShadow2Path = 'M 60,75 65,65 H 55 l 55,-55 10,5 z';
+        if (rounded) {
+            gripMainPath = 'M 85,-25 25,35 c 15,0 40,30 35,40 l 60,-60 z';
+            gripShadow1Path = 'm 25,35 c 3.92361,0.384473 7.644275,0.980572 10,3 l 55,-53 -5,-10 z';
+            gripShadow2Path = 'M 60,75 C 61,66 59,65 56,59 l 54,-54 10,10 z';
         }
-        const primaryStrokeTipPath = `M14,63 ${tipCenterPrimaryPath} L88,60 Z`;
-        const backgroundStrokeTipPath = `M14,63 ${tipCenterBackgroundPath} L88,60 Z`;
-        icon.innerHTML = `
-		<defs>
-			${checkerboardPatternDef}
-		</defs>
-		<g>
-			<!-- Pen grip -->
+        const penTipPath = `M 25,35 ${10 - tipThickness / 4},${70 - tipThickness / 2} 20,75 25,85 60,75 70,55 45,25 Z`;
+        const pencilTipColor = Color4.fromHex('#f4d7d7');
+        const tipColor = pencilTipColor.mix(Color4.fromString(color), tipThickness / 40 - 0.1).toHexString();
+        const ink = `
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${inkTrailPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTipPath}"
+			/>
+			<path
+				fill="${color}"
+				d="${inkTrailPath}"
+			/>
+		`;
+        const penTip = `
+			<path
+				fill="${checkerboardPatternRef}"
+				d="${penTipPath}"
+			/>
+			<path
+				fill="${tipColor}"
+				stroke="${color}"
+				d="${penTipPath}"
+			/>
+		`;
+        const grip = `
 			<path
-				d='M10,10 L90,10 L90,60 L${50 + halfThickness},80 L${50 - halfThickness},80 L10,60 Z'
 				${iconColorStrokeFill}
+				d="${gripMainPath}"
 			/>
-		</g>
-		<g>
-			<!-- Checkerboard background for slightly transparent pens -->
-			<path d='${backgroundStrokeTipPath}' fill='${checkerboardPatternRef}'/>
-	
-			<!-- Actual pen tip -->
+
+			<!-- shadows -->
+			<path
+				fill="rgba(150, 150, 150, 0.3)"
+				d="${gripShadow1Path}"
+			/>
+			<path
+				fill="rgba(100, 100, 100, 0.2)"
+				d="${gripShadow2Path}"
+			/>
+
+			<!-- color bubble -->
 			<path
-				d='${primaryStrokeTipPath}'
-				fill='${color}'
-				stroke='${color}'
+				fill="${checkerboardPatternRef}"
+				d="${colorBubblePath}"
 			/>
+			<path
+				fill="${color}"
+				d="${colorBubblePath}"
+			/>
+		`;
+        icon.innerHTML = `
+		<defs>
+			${checkerboardPatternDef}
+		</defs>
+		<g>
+			${ink}
+			${penTip}
+			${grip}
 		</g>
 		`;
         return icon;

package/dist/src/toolbar/makeColorInput.js

@@ -9,7 +9,7 @@ export const makeColorInput = (editor, onColorChange) => {
     colorInput.classList.add('coloris_input');
     colorInputContainer.classList.add('color-input-container');
     colorInputContainer.appendChild(colorInput);
-    addPipetteTool(editor, colorInputContainer, (color) => {
+    const pipetteController = addPipetteTool(editor, colorInputContainer, (color) => {
         colorInput.value = color.toHexString();
         onInputEnd();
         // Update the color preview, if it exists (may be managed by Coloris).
@@ -41,6 +41,7 @@ export const makeColorInput = (editor, onColorChange) => {
             kind: EditorEventType.ColorPickerToggled,
             open: true,
         });
+        pipetteController.cancel();
     });
     colorInput.addEventListener('close', () => {
         editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
@@ -102,5 +103,11 @@ const addPipetteTool = (editor, container, onColorChange) => {
         }
     };
     container.appendChild(pipetteButton);
+    return {
+        // Cancel a pipette color selection if one is in progress.
+        cancel: () => {
+            endColorSelectMode();
+        },
+    };
 };
 export default makeColorInput;

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

@@ -21,11 +21,12 @@ export default class PanZoom extends BaseTool {
     private editor;
     private mode;
     private transform;
-    private lastAngle;
     private lastDist;
     private lastScreenCenter;
     private lastTimestamp;
     private lastPointerDownTimestamp;
+    private initialTouchAngle;
+    private initialViewportRotation;
     private inertialScroller;
     private velocity;
     constructor(editor: Editor, mode: PanZoomMode, description: string);
@@ -34,6 +35,7 @@ export default class PanZoom extends BaseTool {
     onPointerDown({ allPointers: pointers, current: currentPointer }: PointerEvt): boolean;
     private updateVelocity;
     private getCenterDelta;
+    private toSnappedRotationDelta;
     private handleTwoFingerMove;
     private handleOneFingerMove;
     onPointerMove({ allPointers }: PointerEvt): void;

package/dist/src/tools/PanZoom.js

@@ -78,6 +78,8 @@ export default class PanZoom extends BaseTool {
         this.mode = mode;
         this.transform = null;
         this.lastPointerDownTimestamp = 0;
+        this.initialTouchAngle = 0;
+        this.initialViewportRotation = 0;
         this.inertialScroller = null;
         this.velocity = null;
     }
@@ -104,9 +106,10 @@ export default class PanZoom extends BaseTool {
         const isRightClick = this.allPointersAreOfType(pointers, PointerDevice.RightButtonMouse);
         if (allAreTouch && pointers.length === 2 && this.mode & PanZoomMode.TwoFingerTouchGestures) {
             const { screenCenter, angle, dist } = this.computePinchData(pointers[0], pointers[1]);
-            this.lastAngle = angle;
             this.lastDist = dist;
             this.lastScreenCenter = screenCenter;
+            this.initialTouchAngle = angle;
+            this.initialViewportRotation = this.editor.viewport.getRotationAngle();
             handlingGesture = true;
         }
         else if (pointers.length === 1 && ((this.mode & PanZoomMode.OneFingerTouchGestures && allAreTouch)
@@ -149,20 +152,42 @@ export default class PanZoom extends BaseTool {
         const delta = this.editor.viewport.screenToCanvasTransform.transformVec3(screenCenter.minus(this.lastScreenCenter));
         return delta;
     }
+    //  Snaps `angle` to common desired rotations. For example, if `touchAngle` corresponds
+    // to a viewport rotation of 90.1 degrees, this function returns a rotation delta that,
+    // when applied to the viewport, rotates the viewport to 90.0 degrees.
+    //
+    // Returns a snapped rotation delta that, when applied to the viewport, rotates the viewport,
+    // from its position on the last touchDown event, by `touchAngle - initialTouchAngle`.
+    toSnappedRotationDelta(touchAngle) {
+        const deltaAngle = touchAngle - this.initialTouchAngle;
+        let fullRotation = deltaAngle + this.initialViewportRotation;
+        const snapToMultipleOf = Math.PI / 2;
+        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;
+        // Snap the rotation
+        if (Math.abs(fullRotation - roundedFullRotation) < maxSnapAngle) {
+            fullRotation = roundedFullRotation;
+        }
+        return fullRotation - this.editor.viewport.getRotationAngle();
+    }
     handleTwoFingerMove(allPointers) {
         const { screenCenter, canvasCenter, angle, dist } = this.computePinchData(allPointers[0], allPointers[1]);
         const delta = this.getCenterDelta(screenCenter);
-        let rotation = angle - this.lastAngle;
+        let deltaRotation;
         if (this.isRotationLocked()) {
-            rotation = 0;
+            deltaRotation = 0;
+        }
+        else {
+            deltaRotation = this.toSnappedRotationDelta(angle);
         }
         this.updateVelocity(screenCenter);
         const transformUpdate = Mat33.translation(delta)
             .rightMul(Mat33.scaling2D(dist / this.lastDist, canvasCenter))
-            .rightMul(Mat33.zRotation(rotation, canvasCenter));
+            .rightMul(Mat33.zRotation(deltaRotation, canvasCenter));
         this.lastScreenCenter = screenCenter;
         this.lastDist = dist;
-        this.lastAngle = angle;
         this.transform = Viewport.transformBy(this.transform.transform.rightMul(transformUpdate));
     }
     handleOneFingerMove(pointer) {
@@ -266,7 +291,7 @@ export default class PanZoom extends BaseTool {
         const toCanvas = this.editor.viewport.screenToCanvasTransform;
         // Transform without including translation
         const translation = toCanvas.transformVec3(Vec3.of(-delta.x, -delta.y, 0));
-        const pinchZoomScaleFactor = 1.04;
+        const pinchZoomScaleFactor = 1.03;
         const transformUpdate = Mat33.scaling2D(Math.max(0.25, Math.min(Math.pow(pinchZoomScaleFactor, -delta.z), 4)), canvasPos).rightMul(Mat33.translation(translation));
         this.updateTransform(transformUpdate, true);
         return true;

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

@@ -1,10 +1,17 @@
-/**
- * A tool that handles paste events.
- * @packageDocumentation
- */
 import Editor from '../Editor';
 import { PasteEvent } from '../types';
 import BaseTool from './BaseTool';
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ *
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
 export default class PasteHandler extends BaseTool {
     private editor;
     constructor(editor: Editor);

package/dist/src/tools/PasteHandler.js

@@ -1,7 +1,3 @@
-/**
- * A tool that handles paste events.
- * @packageDocumentation
- */
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -18,12 +14,23 @@ import BaseTool from './BaseTool';
 import TextTool from './TextTool';
 import Color4 from '../Color4';
 import ImageComponent from '../components/ImageComponent';
-// { @inheritDoc PasteHandler! }
+/**
+ * A tool that handles paste events (e.g. as triggered by ctrl+V).
+ *
+ * @example
+ * While `ToolController` has a `PasteHandler` in its default list of tools,
+ * if a non-default set is being used, `PasteHandler` can be added as follows:
+ * ```ts
+ * const toolController = editor.toolController;
+ * toolController.addTool(new PasteHandler(editor));
+ * ```
+ */
 export default class PasteHandler extends BaseTool {
     constructor(editor) {
         super(editor.notifier, editor.localization.pasteHandler);
         this.editor = editor;
     }
+    // @internal
     onPaste(event) {
         const mime = event.mime.toLowerCase();
         if (mime === 'image/svg+xml') {

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

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
 import Pointer from '../Pointer';
-import { KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
+import { KeyPressEvent, KeyUpEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 export interface PenStyle {
@@ -14,6 +14,7 @@ export default class Pen extends BaseTool {
     private builderFactory;
     protected builder: ComponentBuilder | null;
     private lastPoint;
+    private ctrlKeyPressed;
     constructor(editor: Editor, description: string, style: PenStyle, builderFactory?: ComponentBuilderFactory);
     private getPressureMultiplier;
     protected toStrokePoint(pointer: Pointer): StrokeDataPoint;
@@ -23,6 +24,7 @@ export default class Pen extends BaseTool {
     onPointerMove({ current }: PointerEvt): void;
     onPointerUp({ current }: PointerEvt): void;
     onGestureCancel(): void;
+    private finalizeStroke;
     private noteUpdated;
     setColor(color: Color4): void;
     setThickness(thickness: number): void;
@@ -30,5 +32,8 @@ export default class Pen extends BaseTool {
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;
-    onKeyPress({ key }: KeyPressEvent): boolean;
+    setEnabled(enabled: boolean): void;
+    private isSnappingToGrid;
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+    onKeyUp({ key }: KeyUpEvent): boolean;
 }

package/dist/src/tools/Pen.js

@@ -11,6 +11,7 @@ export default class Pen extends BaseTool {
         this.builderFactory = builderFactory;
         this.builder = null;
         this.lastPoint = null;
+        this.ctrlKeyPressed = false;
     }
     getPressureMultiplier() {
         return 1 / this.editor.viewport.getScaleFactor() * this.style.thickness;
@@ -18,6 +19,9 @@ export default class Pen extends BaseTool {
     // Converts a `pointer` to a `StrokeDataPoint`.
     toStrokePoint(pointer) {
         var _a;
+        if (this.isSnappingToGrid()) {
+            pointer = pointer.snappedToGrid(this.editor.viewport);
+        }
         const minPressure = 0.3;
         let pressure = Math.max((_a = pointer.pressure) !== null && _a !== void 0 ? _a : 1.0, minPressure);
         if (!isFinite(pressure)) {
@@ -27,8 +31,9 @@ export default class Pen extends BaseTool {
         console.assert(isFinite(pointer.canvasPos.length()), 'Non-finite canvas position!');
         console.assert(isFinite(pointer.screenPos.length()), 'Non-finite screen position!');
         console.assert(isFinite(pointer.timeStamp), 'Non-finite timeStamp on pointer!');
+        const pos = pointer.canvasPos;
         return {
-            pos: pointer.canvasPos,
+            pos,
             width: pressure * this.getPressureMultiplier(),
             color: this.style.color,
             time: pointer.timeStamp,
@@ -65,6 +70,8 @@ export default class Pen extends BaseTool {
         return false;
     }
     onPointerMove({ current }) {
+        if (!this.builder)
+            return;
         this.addPointToStroke(this.toStrokePoint(current));
     }
     onPointerUp({ current }) {
@@ -76,7 +83,15 @@ export default class Pen extends BaseTool {
         const currentPoint = this.toStrokePoint(current);
         const strokePoint = Object.assign(Object.assign({}, currentPoint), { width: (_b = (_a = this.lastPoint) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : currentPoint.width });
         this.addPointToStroke(strokePoint);
-        if (this.builder && current.isPrimary) {
+        if (current.isPrimary) {
+            this.finalizeStroke();
+        }
+    }
+    onGestureCancel() {
+        this.editor.clearWetInk();
+    }
+    finalizeStroke() {
+        if (this.builder) {
             const stroke = this.builder.build();
             this.previewStroke();
             if (stroke.getBBox().area > 0) {
@@ -91,9 +106,6 @@ export default class Pen extends BaseTool {
         this.builder = null;
         this.editor.clearWetInk();
     }
-    onGestureCancel() {
-        this.editor.clearWetInk();
-    }
     noteUpdated() {
         this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
             kind: EditorEventType.ToolUpdated,
@@ -121,7 +133,12 @@ export default class Pen extends BaseTool {
     getThickness() { return this.style.thickness; }
     getColor() { return this.style.color; }
     getStrokeFactory() { return this.builderFactory; }
-    onKeyPress({ key }) {
+    setEnabled(enabled) {
+        super.setEnabled(enabled);
+        this.ctrlKeyPressed = false;
+    }
+    isSnappingToGrid() { return this.ctrlKeyPressed; }
+    onKeyPress({ key, ctrlKey }) {
         key = key.toLowerCase();
         let newThickness;
         if (key === '-' || key === '_') {
@@ -135,6 +152,22 @@ export default class Pen extends BaseTool {
             this.setThickness(newThickness);
             return true;
         }
+        if (key === 'control') {
+            this.ctrlKeyPressed = true;
+            return true;
+        }
+        // Ctrl+Z: End the stroke so that it can be undone/redone.
+        if (key === 'z' && ctrlKey && this.builder) {
+            this.finalizeStroke();
+        }
+        return false;
+    }
+    onKeyUp({ key }) {
+        key = key.toLowerCase();
+        if (key === 'control') {
+            this.ctrlKeyPressed = false;
+            return true;
+        }
         return false;
     }
 }

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

@@ -17,6 +17,7 @@ export default class SelectionHandle {
     private readonly onDragUpdate;
     private readonly onDragEnd;
     private element;
+    private snapToGrid;
     constructor(shape: HandleShape, parentSide: Vec2, parent: Selection, onDragStart: DragStartCallback, onDragUpdate: DragUpdateCallback, onDragEnd: DragEndCallback);
     /**
      * Adds this to `container`, where `conatiner` should be the background/selection
@@ -32,4 +33,6 @@ export default class SelectionHandle {
     handleDragStart(pointer: Pointer): void;
     handleDragUpdate(pointer: Pointer): void;
     handleDragEnd(): void;
+    setSnapToGrid(snap: boolean): void;
+    isSnappingToGrid(): boolean;
 }

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

@@ -72,4 +72,10 @@ export default class SelectionHandle {
         }
         this.onDragEnd();
     }
+    setSnapToGrid(snap) {
+        this.snapToGrid = snap;
+    }
+    isSnappingToGrid() {
+        return this.snapToGrid;
+    }
 }

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

@@ -12,10 +12,12 @@ export default class SelectionTool extends BaseTool {
     private lastEvtTarget;
     private expandingSelectionBox;
     private shiftKeyPressed;
+    private ctrlKeyPressed;
     constructor(editor: Editor, description: string);
     private makeSelectionBox;
+    private snapSelectionToGrid;
     private selectionBoxHandlingEvt;
-    onPointerDown(event: PointerEvt): boolean;
+    onPointerDown({ allPointers, current }: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
     private onSelectionUpdated;
     private onGestureEnd;