js-draw 0.10.1 → 0.10.2

package/dist/src/components/AbstractComponent.d.ts

@@ -29,6 +29,7 @@ export default abstract class AbstractComponent {
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     transformBy(affineTransfm: Mat33): SerializableCommand;
     isSelectable(): boolean;
+    getProportionalRenderingTime(): number;
     private static transformElementCommandId;
     private static UnresolvedTransformElementCommand;
     private static TransformElementCommand;

package/dist/src/components/AbstractComponent.js

@@ -52,6 +52,12 @@ export default class AbstractComponent {
     isSelectable() {
         return true;
     }
+    // @returns an approximation of the proportional time it takes to render this component.
+    // This is intended to be a rough estimate, but, for example, a stroke with two points sould have
+    // a renderingWeight approximately twice that of a stroke with one point.
+    getProportionalRenderingTime() {
+        return 1;
+    }
     // Returns a copy of this component.
     clone() {
         const clone = this.createClone();

package/dist/src/components/ImageComponent.d.ts

@@ -12,6 +12,7 @@ export default class ImageComponent extends AbstractComponent {
     private recomputeBBox;
     static fromImage(elem: HTMLImageElement, transform: Mat33): Promise<ImageComponent>;
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
     intersects(lineSegment: LineSegment2): boolean;
     protected serializeToJSON(): {
         src: string;

package/dist/src/components/ImageComponent.js

@@ -80,6 +80,10 @@ export default class ImageComponent extends AbstractComponent {
     render(canvas, _visibleRect) {
         canvas.drawImage(this.image);
     }
+    getProportionalRenderingTime() {
+        // Estimate: Equivalent to a stroke with 10 segments.
+        return 10;
+    }
     intersects(lineSegment) {
         const rect = this.getImageRect();
         const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));

package/dist/src/components/Stroke.d.ts

@@ -8,9 +8,11 @@ import { ImageComponentLocalization } from './localization';
 export default class Stroke extends AbstractComponent {
     private parts;
     protected contentBBox: Rect2;
+    private approximateRenderingTime;
     constructor(parts: RenderablePathSpec[]);
     intersects(line: LineSegment2): boolean;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
     private bboxForPart;
     protected applyTransformation(affineTransfm: Mat33): void;
     getPath(): Path;

package/dist/src/components/Stroke.js

@@ -7,6 +7,7 @@ export default class Stroke extends AbstractComponent {
     constructor(parts) {
         var _a;
         super('stroke');
+        this.approximateRenderingTime = 0;
         this.parts = [];
         for (const section of parts) {
             const path = Path.fromRenderable(section);
@@ -24,6 +25,7 @@ export default class Stroke extends AbstractComponent {
                 style: section.style,
                 commands: path.parts,
             });
+            this.approximateRenderingTime += path.parts.length;
         }
         (_a = this.contentBBox) !== null && _a !== void 0 ? _a : (this.contentBBox = Rect2.empty);
     }
@@ -53,6 +55,9 @@ export default class Stroke extends AbstractComponent {
         }
         canvas.endObject(this.getLoadSaveData());
     }
+    getProportionalRenderingTime() {
+        return this.approximateRenderingTime;
+    }
     // Grows the bounding box for a given stroke part based on that part's style.
     bboxForPart(origBBox, style) {
         if (!style.stroke) {

package/dist/src/components/TextComponent.d.ts

@@ -26,6 +26,7 @@ export default class TextComponent extends AbstractComponent {
     private recomputeBBox;
     private renderInternal;
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
+    getProportionalRenderingTime(): number;
     intersects(lineSegment: LineSegment2): boolean;
     getBaselinePos(): import("../lib").Vec3;
     getTextStyle(): TextStyle;

package/dist/src/components/TextComponent.js

@@ -91,6 +91,9 @@ export default class TextComponent extends AbstractComponent {
         this.renderInternal(canvas);
         canvas.endObject(this.getLoadSaveData());
     }
+    getProportionalRenderingTime() {
+        return this.textObjects.length;
+    }
     intersects(lineSegment) {
         // Convert canvas space to internal space.
         const invTransform = this.transform.inverse();

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

@@ -60,6 +60,7 @@ export class StrokeSmoother {
             this.buffer[this.buffer.length - 2], lastPoint,
         ];
         this.currentCurve = null;
+        this.isFirstSegment = false;
     }
     // Returns [upper curve, connector, lower curve]
     currentSegmentToPath() {
@@ -116,20 +117,23 @@ export class StrokeSmoother {
         const pointRadius = newPoint.width;
         const prevEndWidth = this.curveEndWidth;
         this.curveEndWidth = pointRadius;
-        if (this.isFirstSegment) {
-            // The start of a curve often lacks accurate pressure information. Update it.
-            this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
-        }
         // recompute bbox
         this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
+        // If the last curve just ended or it's the first curve,
         if (this.currentCurve === null) {
             const p1 = lastPoint.pos;
             const p2 = lastPoint.pos.plus((_b = this.lastExitingVec) !== null && _b !== void 0 ? _b : Vec2.unitX);
             const p3 = newPoint.pos;
             // Quadratic Bézier curve
             this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
-            this.curveStartWidth = lastPoint.width;
             console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
+            if (this.isFirstSegment) {
+                // The start of a curve often lacks accurate pressure information. Update it.
+                this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+            }
+            else {
+                this.curveStartWidth = prevEndWidth;
+            }
         }
         // If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.
         let enteringVec = this.lastExitingVec;

package/dist/src/math/Mat33.d.ts

@@ -69,6 +69,8 @@ export default class Mat33 {
      * This is the standard way of transforming vectors in ℝ³.
      */
     transformVec3(other: Vec3): Vec3;
+    /** @returns true iff this is the identity matrix. */
+    isIdentity(): boolean;
     /** Returns true iff this = other ± fuzz */
     eq(other: Mat33, fuzz?: number): boolean;
     toString(): string;

package/dist/src/math/Mat33.js

@@ -153,6 +153,13 @@ export default class Mat33 {
     transformVec3(other) {
         return Vec3.of(this.rows[0].dot(other), this.rows[1].dot(other), this.rows[2].dot(other));
     }
+    /** @returns true iff this is the identity matrix. */
+    isIdentity() {
+        if (this === Mat33.identity) {
+            return true;
+        }
+        return this.eq(Mat33.identity);
+    }
     /** Returns true iff this = other ± fuzz */
     eq(other, fuzz = 0) {
         for (let i = 0; i < 3; i++) {

package/dist/src/math/Path.js

@@ -179,6 +179,9 @@ export default class Path {
         return new Path(startPoint, newParts);
     }
     transformedBy(affineTransfm) {
+        if (affineTransfm.isIdentity()) {
+            return this;
+        }
         return this.mapPoints(point => affineTransfm.transformVec2(point));
     }
     // Creates a new path by joining [other] to the end of this path

package/dist/src/rendering/Display.js

@@ -73,8 +73,11 @@ export default class Display {
             blockResolution: cacheBlockResolution,
             cacheSize: 600 * 600 * 4 * 90,
             maxScale: 1.4,
-            minComponentsPerCache: 20,
-            minComponentsToUseCache: 105,
+            // Require about 20 strokes with 4 parts each to cache an image in one of the
+            // parts of the cache grid.
+            minProportionalRenderTimePerCache: 20 * 4,
+            // Require about 105 strokes with 4 parts each to use the cache at all.
+            minProportionalRenderTimeToUseCache: 105 * 4,
         });
         this.editor.notifier.on(EditorEventType.DisplayResized, event => {
             var _a;

package/dist/src/rendering/caching/RenderingCache.js

@@ -31,7 +31,11 @@ export default class RenderingCache {
         }
         this.rootNode = (_a = this.rootNode.smallestChildContaining(visibleRect)) !== null && _a !== void 0 ? _a : this.rootNode;
         const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
-        if (visibleLeaves.length > this.sharedState.props.minComponentsToUseCache) {
+        let approxVisibleRenderTime = 0;
+        for (const leaf of visibleLeaves) {
+            approxVisibleRenderTime += leaf.getContent().getProportionalRenderingTime();
+        }
+        if (approxVisibleRenderTime > this.sharedState.props.minProportionalRenderTimeToUseCache) {
             this.rootNode.renderItems(screenRenderer, [image], viewport);
         }
         else {

package/dist/src/rendering/caching/RenderingCacheNode.js

@@ -197,9 +197,12 @@ export default class RenderingCacheNode {
                     }
                     return;
                 }
+                let leafApproxRenderTime = 0;
+                for (const leaf of leavesByIds) {
+                    leafApproxRenderTime += leaf.getContent().getProportionalRenderingTime();
+                }
                 // Is it worth it to render the items?
-                // TODO: Consider replacing this with something performace based.
-                if (leavesByIds.length > this.cacheState.props.minComponentsPerCache) {
+                if (leafApproxRenderTime > this.cacheState.props.minProportionalRenderTimePerCache) {
                     let fullRerenderNeeded = true;
                     if (!this.cachedRenderer) {
                         this.cachedRenderer = this.cacheState.recordManager.allocCanvas(this.region, () => this.onRegionDealloc());

package/dist/src/rendering/caching/testUtils.js

@@ -12,7 +12,7 @@ export const createCache = (onRenderAlloc, cacheOptions) => {
         },
         isOfCorrectType(renderer) {
             return renderer instanceof DummyRenderer;
-        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minComponentsPerCache: 0, minComponentsToUseCache: 0 }, cacheOptions));
+        }, blockResolution: Vec2.of(500, 500), cacheSize: 500 * 10 * 4, maxScale: 2, minProportionalRenderTimePerCache: 0, minProportionalRenderTimeToUseCache: 0 }, cacheOptions));
     return {
         cache,
         editor

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

@@ -9,8 +9,8 @@ export interface CacheProps {
     blockResolution: Vec2;
     cacheSize: number;
     maxScale: number;
-    minComponentsPerCache: number;
-    minComponentsToUseCache: number;
+    minProportionalRenderTimePerCache: number;
+    minProportionalRenderTimeToUseCache: number;
 }
 export interface CacheState {
     currentRenderingCycle: number;

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

@@ -25,6 +25,7 @@ export default class IconProvider {
     makePipetteIcon(color?: Color4): IconType;
     makeResizeViewportIcon(): IconType;
     makeDuplicateSelectionIcon(): IconType;
+    makePasteIcon(): IconType;
     makeDeleteSelectionIcon(): IconType;
     makeSaveIcon(): IconType;
 }

package/dist/src/toolbar/IconProvider.js

@@ -433,6 +433,18 @@ export default class IconProvider {
 			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
 		`);
     }
+    makePasteIcon() {
+        const icon = this.makeIconFromPath(`
+			M 50 0 L 50 5 L 35 5 L 40 24.75 L 20 25 L 20 100 L 85 100 L 100 90 L 100 24 L 75.1 24.3 L 80 5 L 65 5 L 65 0 L 50 0 z
+			M 10 15 L 10 115 L 110 115 L 110 15 L 85 15 L 83 20 L 105 20 L 105 110 L 15 110 L 15 20 L 32 20 L 30 15 L 10 15 z
+			M 25 35 L 90 35 L 90 40 L 25 40 L 25 35 z
+			M 25 45 L 90 45 L 90 50 L 25 50 L 25 45 z
+			M 25 55 L 85 55 L 85 60 L 25 60 L 25 55 z
+			M 25 65 L 90 65 L 90 70 L 25 70 L 25 65 z 
+		`);
+        icon.setAttribute('viewBox', '0 0 120 120');
+        return icon;
+    }
     makeDeleteSelectionIcon() {
         const strokeWidth = '5px';
         const strokeColor = 'var(--icon-color)';

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

@@ -26,6 +26,7 @@ export interface ToolbarLocalization {
     zoom: string;
     resetView: string;
     selectionToolKeyboardShortcuts: string;
+    paste: string;
     dropdownShown: (toolName: string) => string;
     dropdownHidden: (toolName: string) => string;
     zoomLevel: (zoomPercentage: number) => string;

package/dist/src/toolbar/localization.js

@@ -26,6 +26,7 @@ export const defaultToolbarLocalization = {
     outlinedRectanglePen: 'Outlined rectangle',
     filledRectanglePen: 'Filled rectangle',
     lockRotation: 'Lock rotation',
+    paste: 'Paste',
     dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
     dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
     zoomLevel: (zoomPercent) => `Zoom: ${zoomPercent}%`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.10.1",
+	"version": "0.10.2",
 	"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/AbstractComponent.ts

@@ -70,6 +70,7 @@ export default abstract class AbstractComponent {
 	public getZIndex(): number {
 		return this.zIndex;
 	}
+
 	public getBBox(): Rect2 {
 		return this.contentBBox;
 	}
@@ -94,6 +95,13 @@ export default abstract class AbstractComponent {
 		return true;
 	}
 
+	// @returns an approximation of the proportional time it takes to render this component.
+	// This is intended to be a rough estimate, but, for example, a stroke with two points sould have
+	// a renderingWeight approximately twice that of a stroke with one point.
+	public getProportionalRenderingTime(): number {
+		return 1;
+	}
+
 	private static transformElementCommandId = 'transform-element';
 
 	private static UnresolvedTransformElementCommand = class extends SerializableCommand {

package/src/components/ImageComponent.ts

@@ -88,6 +88,11 @@ export default class ImageComponent extends AbstractComponent {
 		canvas.drawImage(this.image);
 	}
 
+	public getProportionalRenderingTime(): number {
+		// Estimate: Equivalent to a stroke with 10 segments.
+		return 10;
+	}
+
 	public intersects(lineSegment: LineSegment2): boolean {
 		const rect = this.getImageRect();
 		const edges = rect.getEdges().map(edge => edge.transformedBy(this.image.transform));

package/src/components/Stroke.ts

@@ -15,11 +15,16 @@ export default class Stroke extends AbstractComponent {
 	private parts: StrokePart[];
 	protected contentBBox: Rect2;
 
+	// See `getProportionalRenderingTime`
+	private approximateRenderingTime: number;
+
 	// Creates a `Stroke` from the given `parts`.
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 
+		this.approximateRenderingTime = 0;
 		this.parts = [];
+
 		for (const section of parts) {
 			const path = Path.fromRenderable(section);
 			const pathBBox = this.bboxForPart(path.bbox, section.style);
@@ -38,6 +43,8 @@ export default class Stroke extends AbstractComponent {
 				style: section.style,
 				commands: path.parts,
 			});
+
+			this.approximateRenderingTime += path.parts.length;
 		}
 		this.contentBBox ??= Rect2.empty;
 	}
@@ -71,6 +78,10 @@ export default class Stroke extends AbstractComponent {
 		canvas.endObject(this.getLoadSaveData());
 	}
 
+	public getProportionalRenderingTime(): number {
+		return this.approximateRenderingTime;
+	}
+
 	// Grows the bounding box for a given stroke part based on that part's style.
 	private bboxForPart(origBBox: Rect2, style: RenderingStyle) {
 		if (!style.stroke) {

package/src/components/TextComponent.ts

@@ -121,6 +121,10 @@ export default class TextComponent extends AbstractComponent {
 		canvas.endObject(this.getLoadSaveData());
 	}
 
+	public getProportionalRenderingTime(): number {
+		return this.textObjects.length;
+	}
+
 	public intersects(lineSegment: LineSegment2): boolean {
 
 		// Convert canvas space to internal space.

package/src/components/util/StrokeSmoother.ts

@@ -98,6 +98,8 @@ export class StrokeSmoother {
 			this.buffer[this.buffer.length - 2], lastPoint,
 		];
 		this.currentCurve = null;
+
+		this.isFirstSegment = false;
 	}
 
 	// Returns [upper curve, connector, lower curve]
@@ -165,25 +167,26 @@ export class StrokeSmoother {
 		const prevEndWidth = this.curveEndWidth;
 		this.curveEndWidth = pointRadius;
 
-		if (this.isFirstSegment) {
-			// The start of a curve often lacks accurate pressure information. Update it.
-			this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
-		}
-
 		// recompute bbox
 		this.bbox = this.bbox.grownToPoint(newPoint.pos, pointRadius);
 
+		// If the last curve just ended or it's the first curve,
 		if (this.currentCurve === null) {
 			const p1 = lastPoint.pos;
 			const p2 = lastPoint.pos.plus(this.lastExitingVec ?? Vec2.unitX);
 			const p3 = newPoint.pos;
 
 			// Quadratic Bézier curve
-			this.currentCurve = new Bezier(
-				p1.xy, p2.xy, p3.xy
-			);
-			this.curveStartWidth = lastPoint.width;
+			this.currentCurve = new Bezier(p1.xy, p2.xy, p3.xy);
 			console.assert(!isNaN(p1.magnitude()) && !isNaN(p2.magnitude()) && !isNaN(p3.magnitude()), 'Expected !NaN');
+
+			if (this.isFirstSegment) {
+				// The start of a curve often lacks accurate pressure information. Update it.
+				this.curveStartWidth = (this.curveStartWidth + pointRadius) / 2;
+			}
+			else {
+				this.curveStartWidth = prevEndWidth;
+			}
 		}
 
 		// If there isn't an entering vector (e.g. because this.isFirstCurve), approximate it.

package/src/math/Mat33.ts

@@ -219,6 +219,15 @@ export default class Mat33 {
 		);
 	}
 
+	/** @returns true iff this is the identity matrix. */
+	public isIdentity(): boolean {
+		if (this === Mat33.identity) {
+			return true;
+		}
+
+		return this.eq(Mat33.identity);
+	}
+
 	/** Returns true iff this = other ± fuzz */
 	public eq(other: Mat33, fuzz: number = 0): boolean {
 		for (let i = 0; i < 3; i++) {

package/src/math/Path.ts

@@ -248,6 +248,10 @@ export default class Path {
 	}
 
 	public transformedBy(affineTransfm: Mat33): Path {
+		if (affineTransfm.isIdentity()) {
+			return this;
+		}
+
 		return this.mapPoints(point => affineTransfm.transformVec2(point));
 	}
 

package/src/rendering/Display.ts

@@ -78,8 +78,13 @@ export default class Display {
 			blockResolution: cacheBlockResolution,
 			cacheSize: 600 * 600 * 4 * 90,
 			maxScale: 1.4,
-			minComponentsPerCache: 20,
-			minComponentsToUseCache: 105,
+
+			// Require about 20 strokes with 4 parts each to cache an image in one of the
+			// parts of the cache grid.
+			minProportionalRenderTimePerCache: 20 * 4,
+
+			// Require about 105 strokes with 4 parts each to use the cache at all.
+			minProportionalRenderTimeToUseCache: 105 * 4,
 		});
 
 		this.editor.notifier.on(EditorEventType.DisplayResized, event => {

package/src/rendering/caching/RenderingCache.ts

@@ -48,8 +48,16 @@ export default class RenderingCache {
 
 		this.rootNode = this.rootNode!.smallestChildContaining(visibleRect) ?? this.rootNode;
 
-		const visibleLeaves = image.getLeavesIntersectingRegion(viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect));
-		if (visibleLeaves.length > this.sharedState.props.minComponentsToUseCache) {
+		const visibleLeaves = image.getLeavesIntersectingRegion(
+			viewport.visibleRect, rect => screenRenderer.isTooSmallToRender(rect)
+		);
+
+		let approxVisibleRenderTime = 0;
+		for (const leaf of visibleLeaves) {
+			approxVisibleRenderTime += leaf.getContent()!.getProportionalRenderingTime();
+		}
+
+		if (approxVisibleRenderTime > this.sharedState.props.minProportionalRenderTimeToUseCache) {
 			this.rootNode!.renderItems(screenRenderer, [ image ], viewport);
 		} else {
 			image.render(screenRenderer, visibleRect);

package/src/rendering/caching/RenderingCacheNode.ts

@@ -250,9 +250,13 @@ export default class RenderingCacheNode {
 					return;
 				}
 
+				let leafApproxRenderTime = 0;
+				for (const leaf of leavesByIds) {
+					leafApproxRenderTime += leaf.getContent()!.getProportionalRenderingTime();
+				}
+
 				// Is it worth it to render the items?
-				// TODO: Consider replacing this with something performace based.
-				if (leavesByIds.length > this.cacheState.props.minComponentsPerCache) {
+				if (leafApproxRenderTime > this.cacheState.props.minProportionalRenderTimePerCache) {
 					let fullRerenderNeeded = true;
 					if (!this.cachedRenderer) {
 						this.cachedRenderer = this.cacheState.recordManager.allocCanvas(

package/src/rendering/caching/testUtils.ts

@@ -23,8 +23,8 @@ export const createCache = (onRenderAlloc?: RenderAllocCallback, cacheOptions?:
 		blockResolution: Vec2.of(500, 500),
 		cacheSize: 500 * 10 * 4,
 		maxScale: 2,
-		minComponentsPerCache: 0,
-		minComponentsToUseCache: 0,
+		minProportionalRenderTimePerCache: 0,
+		minProportionalRenderTimeToUseCache: 0,
 		...cacheOptions
 	});
 

package/src/rendering/caching/types.ts

@@ -20,11 +20,11 @@ export interface CacheProps {
     maxScale: number;
 
     // Minimum component count to cache, rather than just re-render each time.
-    minComponentsPerCache: number;
+    minProportionalRenderTimePerCache: number;
 
     // Minimum number of strokes/etc. to use the cache to render, isntead of
     // rendering directly.
-    minComponentsToUseCache: number;
+    minProportionalRenderTimeToUseCache: number;
 }
 
 export interface CacheState {

package/src/toolbar/IconProvider.ts

@@ -502,6 +502,19 @@ export default class IconProvider {
 			M 10,25 10,90 70,90 70,60 40,60 40,25 10,25 z 
 		`);
 	}
+
+	public makePasteIcon(): IconType {
+		const icon = this.makeIconFromPath(`
+			M 50 0 L 50 5 L 35 5 L 40 24.75 L 20 25 L 20 100 L 85 100 L 100 90 L 100 24 L 75.1 24.3 L 80 5 L 65 5 L 65 0 L 50 0 z
+			M 10 15 L 10 115 L 110 115 L 110 15 L 85 15 L 83 20 L 105 20 L 105 110 L 15 110 L 15 20 L 32 20 L 30 15 L 10 15 z
+			M 25 35 L 90 35 L 90 40 L 25 40 L 25 35 z
+			M 25 45 L 90 45 L 90 50 L 25 50 L 25 45 z
+			M 25 55 L 85 55 L 85 60 L 25 60 L 25 55 z
+			M 25 65 L 90 65 L 90 70 L 25 70 L 25 65 z 
+		`);
+		icon.setAttribute('viewBox', '0 0 120 120');
+		return icon;
+	}
 	
 	public makeDeleteSelectionIcon(): IconType {
 		const strokeWidth = '5px';

package/src/toolbar/localization.ts

@@ -28,6 +28,7 @@ export interface ToolbarLocalization {
 	zoom: string;
 	resetView: string;
 	selectionToolKeyboardShortcuts: string;
+	paste: string;
 
 	dropdownShown: (toolName: string)=> string;
 	dropdownHidden: (toolName: string)=> string;
@@ -66,6 +67,8 @@ export const defaultToolbarLocalization: ToolbarLocalization = {
 	filledRectanglePen: 'Filled rectangle',
 	lockRotation: 'Lock rotation',
 
+	paste: 'Paste',
+
 	dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
 	dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
 	zoomLevel: (zoomPercent: number) => `Zoom: ${zoomPercent}%`,