js-draw 0.3.1 → 0.4.0

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

@@ -55,7 +55,7 @@ export default class Path {
     static fromRenderable(renderable: RenderablePathSpec): Path;
     toRenderable(fill: RenderingStyle): RenderablePathSpec;
     private cachedStringVersion;
-    toString(): string;
+    toString(useNonAbsCommands?: boolean): string;
     serialize(): string;
     static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string;
     static fromString(pathString: string): Path;

package/dist/src/math/Path.js

@@ -282,13 +282,15 @@ export default class Path {
             path: this,
         };
     }
-    toString() {
+    toString(useNonAbsCommands) {
         if (this.cachedStringVersion) {
             return this.cachedStringVersion;
         }
-        // Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-        const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
-        const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+        if (useNonAbsCommands === undefined) {
+            // Hueristic: Try to determine whether converting absolute to relative commands is worth it.
+            useNonAbsCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
+        }
+        const result = Path.toString(this.startPoint, this.parts, !useNonAbsCommands);
         this.cachedStringVersion = result;
         return result;
     }
@@ -307,10 +309,12 @@ export default class Path {
             const roundedPrevX = prevPoint ? toRoundedString(prevPoint.x) : '';
             const roundedPrevY = prevPoint ? toRoundedString(prevPoint.y) : '';
             for (const point of points) {
+                const xComponent = toRoundedString(point.x);
+                const yComponent = toRoundedString(point.y);
                 // Relative commands are often shorter as strings than absolute commands.
                 if (!makeAbsCommand) {
-                    const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint.x, roundedPrevX, roundedPrevY);
-                    const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint.y, roundedPrevX, roundedPrevY);
+                    const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint.x, xComponent, roundedPrevX, roundedPrevY);
+                    const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint.y, yComponent, roundedPrevX, roundedPrevY);
                     // No need for an additional separator if it starts with a '-'
                     if (yComponentRelative.charAt(0) === '-') {
                         relativeCommandParts.push(`${xComponentRelative}${yComponentRelative}`);
@@ -320,8 +324,6 @@ export default class Path {
                     }
                 }
                 else {
-                    const xComponent = toRoundedString(point.x);
-                    const yComponent = toRoundedString(point.y);
                     absoluteCommandParts.push(`${xComponent},${yComponent}`);
                 }
             }

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

@@ -38,6 +38,16 @@ export default class Vec3 {
     minus(v: Vec3): Vec3;
     dot(other: Vec3): number;
     cross(other: Vec3): Vec3;
+    /**
+     * If `other` is a `Vec3`, multiplies `this` component-wise by `other`. Otherwise,
+     * if `other is a `number`, returns the result of scalar multiplication.
+     *
+     * @example
+     * ```
+     * Vec3.of(1, 2, 3).scale(Vec3.of(2, 4, 6)); // → Vec3(2, 8, 18)
+     * ```
+     */
+    scale(other: Vec3 | number): Vec3;
     /**
      * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
      * 90 degrees counter-clockwise.
@@ -73,7 +83,7 @@ export default class Vec3 {
      * ```
      */
     map(fn: (component: number, index: number) => number): Vec3;
-    asArray(): number[];
+    asArray(): [number, number, number];
     /**
      * [fuzz] The maximum difference between two components for this and [other]
      * to be considered equal.

package/dist/src/math/Vec3.js

@@ -76,6 +76,21 @@ export default class Vec3 {
         // | x2 y2 z2|
         return Vec3.of(this.y * other.z - other.y * this.z, other.x * this.z - this.x * other.z, this.x * other.y - other.x * this.y);
     }
+    /**
+     * If `other` is a `Vec3`, multiplies `this` component-wise by `other`. Otherwise,
+     * if `other is a `number`, returns the result of scalar multiplication.
+     *
+     * @example
+     * ```
+     * Vec3.of(1, 2, 3).scale(Vec3.of(2, 4, 6)); // → Vec3(2, 8, 18)
+     * ```
+     */
+    scale(other) {
+        if (typeof other === 'number') {
+            return this.times(other);
+        }
+        return Vec3.of(this.x * other.x, this.y * other.y, this.z * other.z);
+    }
     /**
      * Returns a vector orthogonal to this. If this is a Vec2, returns `this` rotated
      * 90 degrees counter-clockwise.

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

@@ -1,3 +1,4 @@
+export declare const cleanUpNumber: (text: string) => string;
 export declare const toRoundedString: (num: number) => string;
 export declare const getLenAfterDecimal: (numberAsString: string) => number;
 export declare const toStringOfSamePrecision: (num: number, ...references: string[]) => string;

package/dist/src/math/rounding.js

@@ -1,8 +1,14 @@
 // @packageDocumentation @internal
 // Clean up stringified numbers
-const cleanUpNumber = (text) => {
+export const cleanUpNumber = (text) => {
     // Regular expression substitions can be somewhat expensive. Only do them
     // if necessary.
+    if (text.indexOf('e') > 0) {
+        // Round to zero.
+        if (text.match(/[eE][-]\d{2,}$/)) {
+            return '0';
+        }
+    }
     const lastChar = text.charAt(text.length - 1);
     if (lastChar === '0' || lastChar === '.') {
         // Remove trailing zeroes
@@ -10,23 +16,24 @@ const cleanUpNumber = (text) => {
         text = text.replace(/[.]0+$/, '.');
         // Remove trailing period
         text = text.replace(/[.]$/, '');
-        if (text === '-0') {
-            return '0';
-        }
     }
     const firstChar = text.charAt(0);
     if (firstChar === '0' || firstChar === '-') {
         // Remove unnecessary leading zeroes.
         text = text.replace(/^(0+)[.]/, '.');
         text = text.replace(/^-(0+)[.]/, '-.');
+        text = text.replace(/^(-?)0+$/, '$10');
+    }
+    if (text === '-0') {
+        return '0';
     }
     return text;
 };
 export const toRoundedString = (num) => {
     // Try to remove rounding errors. If the number ends in at least three/four zeroes
     // (or nines) just one or two digits, it's probably a rounding error.
-    const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,2}$/;
-    const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,2}$/;
+    const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d{1,4}$/;
+    const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,})\d{1,4}$/;
     let text = num.toString(10);
     if (text.indexOf('.') === -1) {
         return text;

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

@@ -1,7 +1,10 @@
 export interface TextRendererLocalization {
     pathNodeCount(pathCount: number): string;
     textNodeCount(nodeCount: number): string;
+    imageNodeCount(nodeCount: number): string;
     textNode(content: string): string;
+    unlabeledImageNode: string;
+    imageNode(label: string): string;
     rerenderAsText: string;
 }
 export declare const defaultTextRendererLocalization: TextRendererLocalization;

package/dist/src/rendering/localization.js

@@ -1,6 +1,9 @@
 export const defaultTextRendererLocalization = {
     pathNodeCount: (count) => `There are ${count} visible path objects.`,
     textNodeCount: (count) => `There are ${count} visible text nodes.`,
+    imageNodeCount: (nodeCount) => `There are ${nodeCount} visible image nodes.`,
     textNode: (content) => `Text: ${content}`,
+    imageNode: (label) => `Image: ${label}`,
+    unlabeledImageNode: 'Unlabeled image',
     rerenderAsText: 'Re-render as text',
 };

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

@@ -12,6 +12,12 @@ export interface RenderablePathSpec {
     style: RenderingStyle;
     path?: Path;
 }
+export interface RenderableImage {
+    transform: Mat33;
+    image: HTMLImageElement | HTMLCanvasElement;
+    base64Url: string;
+    label?: string;
+}
 export default abstract class AbstractRenderer {
     private viewport;
     private selfTransform;
@@ -27,6 +33,7 @@ export default abstract class AbstractRenderer {
     protected abstract traceCubicBezierCurve(p1: Point2, p2: Point2, p3: Point2): void;
     protected abstract traceQuadraticBezierCurve(controlPoint: Point2, endPoint: Point2): void;
     abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
+    abstract drawImage(image: RenderableImage): void;
     abstract isTooSmallToRender(rect: Rect2): boolean;
     setDraftMode(_draftMode: boolean): void;
     protected objectLevel: number;

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

@@ -64,7 +64,8 @@ export default class AbstractRenderer {
             this.currentPaths.push(path);
         }
     }
-    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill]
+    // Draw a rectangle. Boundary lines have width [lineWidth] and are filled with [lineFill].
+    // This is equivalent to `drawPath(Path.fromRect(...).toRenderable(...))`.
     drawRect(rect, lineWidth, lineFill) {
         const path = Path.fromRect(rect, lineWidth);
         this.drawPath(path.toRenderable(lineFill));

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

@@ -5,7 +5,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     private ctx;
     private ignoreObjectsAboveLevel;
@@ -28,6 +28,7 @@ export default class CanvasRenderer extends AbstractRenderer {
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPath(path: RenderablePathSpec): void;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     private clipLevels;
     startObject(boundingBox: Rect2, clip: boolean): void;
     endObject(): void;

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

@@ -125,6 +125,13 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
         this.ctx.restore();
     }
+    drawImage(image) {
+        this.ctx.save();
+        const transform = this.getCanvasToScreenTransform().rightMul(image.transform);
+        this.transformBy(transform);
+        this.ctx.drawImage(image.image, 0, 0);
+        this.ctx.restore();
+    }
     startObject(boundingBox, clip) {
         if (this.isTooSmallToRender(boundingBox)) {
             this.ignoreObjectsAboveLevel = this.getNestingLevel();

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

@@ -5,7 +5,7 @@ import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;
     renderedPathCount: number;
@@ -13,6 +13,7 @@ export default class DummyRenderer extends AbstractRenderer {
     lastPoint: Point2 | null;
     objectNestingLevel: number;
     lastText: string | null;
+    lastImage: RenderableImage | null;
     pointBuffer: Point2[];
     constructor(viewport: Viewport);
     displaySize(): Vec2;
@@ -25,6 +26,7 @@ export default class DummyRenderer extends AbstractRenderer {
     protected traceQuadraticBezierCurve(controlPoint: Vec3, endPoint: Vec3): void;
     drawPoints(..._points: Vec3[]): void;
     drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2, _clip: boolean): void;
     endObject(): void;
     isTooSmallToRender(_rect: Rect2): boolean;

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

@@ -11,6 +11,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.lastPoint = null;
         this.objectNestingLevel = 0;
         this.lastText = null;
+        this.lastImage = null;
         // List of points drawn since the last clear.
         this.pointBuffer = [];
     }
@@ -30,6 +31,7 @@ export default class DummyRenderer extends AbstractRenderer {
         this.renderedPathCount = 0;
         this.pointBuffer = [];
         this.lastText = null;
+        this.lastImage = null;
         // Ensure all objects finished rendering
         if (this.objectNestingLevel > 0) {
             throw new Error(`Within an object while clearing! Nesting level: ${this.objectNestingLevel}`);
@@ -73,6 +75,9 @@ export default class DummyRenderer extends AbstractRenderer {
     drawText(text, _transform, _style) {
         this.lastText = text;
     }
+    drawImage(image) {
+        this.lastImage = image;
+    }
     startObject(boundingBox, _clip) {
         super.startObject(boundingBox);
         this.objectNestingLevel += 1;

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

@@ -5,20 +5,23 @@ import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer, { RenderablePathSpec } from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export default class SVGRenderer extends AbstractRenderer {
     private elem;
+    private sanitize;
     private lastPathStyle;
     private lastPathString;
     private objectElems;
     private overwrittenAttrs;
-    constructor(elem: SVGSVGElement, viewport: Viewport);
+    constructor(elem: SVGSVGElement, viewport: Viewport, sanitize?: boolean);
     setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
     clear(): void;
     private addPathToSVG;
     drawPath(pathSpec: RenderablePathSpec): void;
+    private transformFrom;
     drawText(text: string, transform: Mat33, style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     startObject(boundingBox: Rect2): void;
     endObject(loaderData?: LoadSaveDataTable): void;
     private unimplementedMessage;

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

@@ -6,9 +6,11 @@ import { svgAttributesDataKey, svgStyleAttributesDataKey } from '../../SVGLoader
 import AbstractRenderer from './AbstractRenderer';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
 export default class SVGRenderer extends AbstractRenderer {
-    constructor(elem, viewport) {
+    // Renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+    constructor(elem, viewport, sanitize = false) {
         super(viewport);
         this.elem = elem;
+        this.sanitize = sanitize;
         this.lastPathStyle = null;
         this.lastPathString = [];
         this.objectElems = null;
@@ -17,6 +19,9 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Sets an attribute on the root SVG element.
     setRootSVGAttribute(name, value) {
+        if (this.sanitize) {
+            return;
+        }
         // Make the original value of the attribute restorable on clear
         if (!(name in this.overwrittenAttrs)) {
             this.overwrittenAttrs[name] = this.elem.getAttribute(name);
@@ -32,18 +37,20 @@ export default class SVGRenderer extends AbstractRenderer {
         return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
     }
     clear() {
-        // Restore all alltributes
-        for (const attrName in this.overwrittenAttrs) {
-            const value = this.overwrittenAttrs[attrName];
-            if (value) {
-                this.elem.setAttribute(attrName, value);
-            }
-            else {
-                this.elem.removeAttribute(attrName);
+        this.lastPathString = [];
+        if (!this.sanitize) {
+            // Restore all all attributes
+            for (const attrName in this.overwrittenAttrs) {
+                const value = this.overwrittenAttrs[attrName];
+                if (value) {
+                    this.elem.setAttribute(attrName, value);
+                }
+                else {
+                    this.elem.removeAttribute(attrName);
+                }
             }
+            this.overwrittenAttrs = {};
         }
-        this.overwrittenAttrs = {};
-        this.lastPathString = [];
     }
     // Push [this.fullPath] to the SVG
     addPathToSVG() {
@@ -74,25 +81,29 @@ export default class SVGRenderer extends AbstractRenderer {
         }
         this.lastPathString.push(path.toString());
     }
-    drawText(text, transform, style) {
-        var _a, _b, _c;
-        transform = this.getCanvasToScreenTransform().rightMul(transform);
+    // Apply [elemTransform] to [elem].
+    transformFrom(elemTransform, elem) {
+        let transform = this.getCanvasToScreenTransform().rightMul(elemTransform);
         const translation = transform.transformVec2(Vec2.zero);
         transform = transform.rightMul(Mat33.translation(translation.times(-1)));
-        const textElem = document.createElementNS(svgNameSpace, 'text');
-        textElem.appendChild(document.createTextNode(text));
-        textElem.style.transform = `matrix(
+        elem.style.transform = `matrix(
 			${transform.a1}, ${transform.b1},
 			${transform.a2}, ${transform.b2},
 			${transform.a3}, ${transform.b3}
 		)`;
+        elem.setAttribute('x', `${toRoundedString(translation.x)}`);
+        elem.setAttribute('y', `${toRoundedString(translation.y)}`);
+    }
+    drawText(text, transform, style) {
+        var _a, _b, _c;
+        const textElem = document.createElementNS(svgNameSpace, 'text');
+        textElem.appendChild(document.createTextNode(text));
+        this.transformFrom(transform, textElem);
         textElem.style.fontFamily = style.fontFamily;
         textElem.style.fontVariant = (_a = style.fontVariant) !== null && _a !== void 0 ? _a : '';
         textElem.style.fontWeight = (_b = style.fontWeight) !== null && _b !== void 0 ? _b : '';
         textElem.style.fontSize = style.size + 'px';
         textElem.style.fill = style.renderingStyle.fill.toHexString();
-        textElem.setAttribute('x', `${toRoundedString(translation.x)}`);
-        textElem.setAttribute('y', `${toRoundedString(translation.y)}`);
         if (style.renderingStyle.stroke) {
             const strokeStyle = style.renderingStyle.stroke;
             textElem.style.stroke = strokeStyle.color.toHexString();
@@ -101,6 +112,17 @@ export default class SVGRenderer extends AbstractRenderer {
         this.elem.appendChild(textElem);
         (_c = this.objectElems) === null || _c === void 0 ? void 0 : _c.push(textElem);
     }
+    drawImage(image) {
+        var _a, _b, _c, _d, _e;
+        const svgImgElem = document.createElementNS(svgNameSpace, 'image');
+        svgImgElem.setAttribute('href', image.base64Url);
+        svgImgElem.setAttribute('width', (_a = image.image.getAttribute('width')) !== null && _a !== void 0 ? _a : '');
+        svgImgElem.setAttribute('height', (_b = image.image.getAttribute('height')) !== null && _b !== void 0 ? _b : '');
+        svgImgElem.setAttribute('aria-label', (_d = (_c = image.image.getAttribute('aria-label')) !== null && _c !== void 0 ? _c : image.image.getAttribute('alt')) !== null && _d !== void 0 ? _d : '');
+        this.transformFrom(image.transform, svgImgElem);
+        this.elem.appendChild(svgImgElem);
+        (_e = this.objectElems) === null || _e === void 0 ? void 0 : _e.push(svgImgElem);
+    }
     startObject(boundingBox) {
         super.startObject(boundingBox);
         // Only accumulate a path within an object
@@ -113,7 +135,7 @@ export default class SVGRenderer extends AbstractRenderer {
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
-        if (loaderData) {
+        if (loaderData && !this.sanitize) {
             // Restore any attributes unsupported by the app.
             for (const elem of (_a = this.objectElems) !== null && _a !== void 0 ? _a : []) {
                 const attrs = loaderData[svgAttributesDataKey];
@@ -150,6 +172,9 @@ export default class SVGRenderer extends AbstractRenderer {
     }
     // Renders a **copy** of the given element.
     drawSVGElem(elem) {
+        if (this.sanitize) {
+            return;
+        }
         this.elem.appendChild(elem.cloneNode(true));
     }
     isTooSmallToRender(_rect) {

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

@@ -5,12 +5,13 @@ import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
-import AbstractRenderer from './AbstractRenderer';
+import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;
     private descriptionBuilder;
     private pathCount;
     private textNodeCount;
+    private imageNodeCount;
     constructor(viewport: Viewport, localizationTable: TextRendererLocalization);
     displaySize(): Vec3;
     clear(): void;
@@ -22,6 +23,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     protected traceCubicBezierCurve(_p1: Vec3, _p2: Vec3, _p3: Vec3): void;
     protected traceQuadraticBezierCurve(_controlPoint: Vec3, _endPoint: Vec3): void;
     drawText(text: string, _transform: Mat33, _style: TextStyle): void;
+    drawImage(image: RenderableImage): void;
     isTooSmallToRender(rect: Rect2): boolean;
     drawPoints(..._points: Vec3[]): void;
 }

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

@@ -8,6 +8,7 @@ export default class TextOnlyRenderer extends AbstractRenderer {
         this.descriptionBuilder = [];
         this.pathCount = 0;
         this.textNodeCount = 0;
+        this.imageNodeCount = 0;
     }
     displaySize() {
         // We don't have a graphical display, export a reasonable size.
@@ -21,7 +22,8 @@ export default class TextOnlyRenderer extends AbstractRenderer {
     getDescription() {
         return [
             this.localizationTable.pathNodeCount(this.pathCount),
-            this.localizationTable.textNodeCount(this.textNodeCount),
+            ...(this.textNodeCount > 0 ? this.localizationTable.textNodeCount(this.textNodeCount) : []),
+            ...(this.imageNodeCount > 0 ? this.localizationTable.imageNodeCount(this.imageNodeCount) : []),
             ...this.descriptionBuilder
         ].join('\n');
     }
@@ -42,6 +44,11 @@ export default class TextOnlyRenderer extends AbstractRenderer {
         this.descriptionBuilder.push(this.localizationTable.textNode(text));
         this.textNodeCount++;
     }
+    drawImage(image) {
+        const label = image.label ? this.localizationTable.imageNode(image.label) : this.localizationTable.unlabeledImageNode;
+        this.descriptionBuilder.push(label);
+        this.imageNodeCount++;
+    }
     isTooSmallToRender(rect) {
         return rect.maxDimension < 15 / this.getSizeOfCanvasPixelOnScreen();
     }

package/dist/src/toolbar/HTMLToolbar.js

@@ -1,17 +1,18 @@
 import { EditorEventType } from '../types';
 import { coloris, init as colorisInit } from '@melloware/coloris';
 import Color4 from '../Color4';
-import SelectionTool from '../tools/SelectionTool';
 import { defaultToolbarLocalization } from './localization';
 import { makeRedoIcon, makeUndoIcon } from './icons';
-import PanZoom from '../tools/PanZoom';
+import SelectionTool from '../tools/SelectionTool/SelectionTool';
+import PanZoomTool from '../tools/PanZoom';
 import TextTool from '../tools/TextTool';
+import EraserTool from '../tools/Eraser';
+import PenTool from '../tools/Pen';
 import PenToolWidget from './widgets/PenToolWidget';
 import EraserWidget from './widgets/EraserToolWidget';
 import SelectionToolWidget from './widgets/SelectionToolWidget';
 import TextToolWidget from './widgets/TextToolWidget';
 import HandToolWidget from './widgets/HandToolWidget';
-import { EraserTool, PenTool } from '../tools/lib';
 export const toolbarCSSPrefix = 'toolbar-';
 export default class HTMLToolbar {
     /** @internal */
@@ -158,7 +159,7 @@ export default class HTMLToolbar {
         for (const tool of toolController.getMatchingTools(TextTool)) {
             this.addWidget(new TextToolWidget(this.editor, tool, this.localizationTable));
         }
-        const panZoomTool = toolController.getMatchingTools(PanZoom)[0];
+        const panZoomTool = toolController.getMatchingTools(PanZoomTool)[0];
         if (panZoomTool) {
             this.addWidget(new HandToolWidget(this.editor, panZoomTool, this.localizationTable));
         }

package/dist/src/toolbar/widgets/SelectionToolWidget.d.ts

@@ -1,5 +1,5 @@
 import Editor from '../../Editor';
-import SelectionTool from '../../tools/SelectionTool';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import { ToolbarLocalization } from '../localization';
 import BaseToolWidget from './BaseToolWidget';
 export default class SelectionToolWidget extends BaseToolWidget {

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

@@ -1,4 +1,4 @@
-import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent } from '../types';
+import { PointerEvtListener, WheelEvt, PointerEvt, EditorNotifier, KeyPressEvent, KeyUpEvent, PasteEvent, CopyEvent } from '../types';
 import ToolEnabledGroup from './ToolEnabledGroup';
 export default abstract class BaseTool implements PointerEvtListener {
     private notifier;
@@ -11,6 +11,8 @@ export default abstract class BaseTool implements PointerEvtListener {
     onGestureCancel(): void;
     protected constructor(notifier: EditorNotifier, description: string);
     onWheel(_event: WheelEvt): boolean;
+    onCopy(_event: CopyEvent): boolean;
+    onPaste(_event: PasteEvent): boolean;
     onKeyPress(_event: KeyPressEvent): boolean;
     onKeyUp(_event: KeyUpEvent): boolean;
     setEnabled(enabled: boolean): void;

package/dist/src/tools/BaseTool.js

@@ -13,6 +13,12 @@ export default class BaseTool {
     onWheel(_event) {
         return false;
     }
+    onCopy(_event) {
+        return false;
+    }
+    onPaste(_event) {
+        return false;
+    }
     onKeyPress(_event) {
         return false;
     }

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

@@ -0,0 +1,16 @@
+/**
+ * A tool that handles paste events.
+ * @packageDocumentation
+ */
+import Editor from '../Editor';
+import { PasteEvent } from '../types';
+import BaseTool from './BaseTool';
+export default class PasteHandler extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onPaste(event: PasteEvent): boolean;
+    private addComponentsFromPaste;
+    private doSVGPaste;
+    private doTextPaste;
+    private doImagePaste;
+}