js-draw 1.16.1 → 1.18.0

package/dist/cjs/Editor.js

@@ -42,7 +42,6 @@ const getLocalizationTable_1 = __importDefault(require("./localizations/getLocal
 const IconProvider_1 = __importDefault(require("./toolbar/IconProvider"));
 const CanvasRenderer_1 = __importDefault(require("./rendering/renderers/CanvasRenderer"));
 const untilNextAnimationFrame_1 = __importDefault(require("./util/untilNextAnimationFrame"));
-const fileToBase64Url_1 = __importDefault(require("./util/fileToBase64Url"));
 const uniteCommands_1 = __importDefault(require("./commands/uniteCommands"));
 const SelectionTool_1 = __importDefault(require("./tools/SelectionTool/SelectionTool"));
 const Erase_1 = __importDefault(require("./commands/Erase"));
@@ -58,6 +57,7 @@ const editorImageToSVG_1 = require("./image/export/editorImageToSVG");
 const ReactiveValue_1 = require("./util/ReactiveValue");
 const listenForKeyboardEventsFrom_1 = __importDefault(require("./util/listenForKeyboardEventsFrom"));
 const mitLicenseAttribution_1 = __importDefault(require("./util/mitLicenseAttribution"));
+const ClipboardHandler_1 = __importDefault(require("./util/ClipboardHandler"));
 /**
  * The main entrypoint for the full editor.
  *
@@ -76,7 +76,7 @@ const mitLicenseAttribution_1 = __importDefault(require("./util/mitLicenseAttrib
  * ```
  *
  * See also
- * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/demo/example.ts).
+ * * [`examples.md`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md).
  */
 class Editor {
     /**
@@ -138,6 +138,10 @@ class Editor {
             iconProvider: settings.iconProvider ?? new IconProvider_1.default(),
             notices: [],
             appInfo: settings.appInfo ? { ...settings.appInfo } : null,
+            pens: {
+                additionalPenTypes: settings.pens?.additionalPenTypes ?? [],
+                filterPenTypes: settings.pens?.filterPenTypes ?? (() => true)
+            },
         };
         // Validate settings
         if (this.settings.minZoom > this.settings.maxZoom) {
@@ -218,6 +222,16 @@ class Editor {
             }
         });
     }
+    /**
+     * @returns a shallow copy of the current settings of the editor.
+     *
+     * Do not modify.
+     */
+    getCurrentSettings() {
+        return {
+            ...this.settings,
+        };
+    }
     /**
      * @returns a reference to the editor's container.
      *
@@ -304,19 +318,12 @@ class Editor {
         this.accessibilityControlArea.addEventListener('input', () => {
             this.accessibilityControlArea.value = '';
         });
-        document.addEventListener('copy', evt => {
+        const copyHandler = new ClipboardHandler_1.default(this);
+        document.addEventListener('copy', async (evt) => {
             if (!this.isEventSink(document.querySelector(':focus'))) {
                 return;
             }
-            const clipboardData = evt.clipboardData;
-            if (this.toolController.dispatchInputEvent({
-                kind: inputEvents_1.InputEvtType.CopyEvent,
-                setData: (mime, data) => {
-                    clipboardData?.setData(mime, data);
-                },
-            })) {
-                evt.preventDefault();
-            }
+            copyHandler.copy(evt);
         });
         document.addEventListener('paste', evt => {
             this.handlePaste(evt);
@@ -384,11 +391,21 @@ class Editor {
      * (e.g. with synthetic events). @internal
      */
     setPointerCapture(target, pointerId) {
-        target.setPointerCapture(pointerId);
+        try {
+            target.setPointerCapture(pointerId);
+        }
+        catch (error) {
+            console.warn('Failed to setPointerCapture', error);
+        }
     }
     /** Can be overridden in a testing environment to handle synthetic events. @internal */
     releasePointerCapture(target, pointerId) {
-        target.releasePointerCapture(pointerId);
+        try {
+            target.releasePointerCapture(pointerId);
+        }
+        catch (error) {
+            console.warn('Failed to releasePointerCapture', error);
+        }
     }
     /**
      * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
@@ -414,7 +431,7 @@ class Editor {
             if (pointer.down) {
                 const prevData = this.pointers[pointer.id];
                 if (prevData) {
-                    const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
+                    const distanceMoved = pointer.screenPos.distanceTo(prevData.screenPos);
                     // If the pointer moved less than two pixels, don't send a new event.
                     if (distanceMoved < 2) {
                         return false;
@@ -473,66 +490,7 @@ class Editor {
         if (!this.isEventSink(target)) {
             return;
         }
-        const clipboardData = evt.dataTransfer ?? evt.clipboardData;
-        if (!clipboardData) {
-            return;
-        }
-        // Handle SVG files (prefer to PNG/JPEG)
-        for (const file of clipboardData.files) {
-            if (file.type.toLowerCase() === 'image/svg+xml') {
-                const text = await file.text();
-                if (this.toolController.dispatchInputEvent({
-                    kind: inputEvents_1.InputEvtType.PasteEvent,
-                    mime: file.type,
-                    data: text,
-                })) {
-                    evt.preventDefault();
-                    return;
-                }
-            }
-        }
-        // Handle image files.
-        for (const file of clipboardData.files) {
-            const fileType = file.type.toLowerCase();
-            if (fileType === 'image/png' || fileType === 'image/jpg') {
-                this.showLoadingWarning(0);
-                const onprogress = (evt) => {
-                    this.showLoadingWarning(evt.loaded / evt.total);
-                };
-                try {
-                    const data = await (0, fileToBase64Url_1.default)(file, { onprogress });
-                    if (data && this.toolController.dispatchInputEvent({
-                        kind: inputEvents_1.InputEvtType.PasteEvent,
-                        mime: fileType,
-                        data: data,
-                    })) {
-                        evt.preventDefault();
-                        this.hideLoadingWarning();
-                        return;
-                    }
-                }
-                catch (e) {
-                    console.error('Error reading image:', e);
-                }
-                this.hideLoadingWarning();
-            }
-        }
-        // Supported MIMEs for text data, in order of preference
-        const supportedMIMEs = [
-            'image/svg+xml',
-            'text/plain',
-        ];
-        for (const mime of supportedMIMEs) {
-            const data = clipboardData.getData(mime);
-            if (data && this.toolController.dispatchInputEvent({
-                kind: inputEvents_1.InputEvtType.PasteEvent,
-                mime,
-                data,
-            })) {
-                evt.preventDefault();
-                return;
-            }
-        }
+        return await new ClipboardHandler_1.default(this).paste(evt);
     }
     /**
      * Forward pointer events from `elem` to this editor. Such that right-click/right-click drag
@@ -643,7 +601,7 @@ class Editor {
                 const eventBuffer = gestureData[pointerId].eventBuffer;
                 // Skip if the pointer hasn't moved enough to not be a "click".
                 const strokeStartThreshold = 10;
-                const isWithinClickThreshold = gestureStartPos && currentPos.minus(gestureStartPos).magnitude() < strokeStartThreshold;
+                const isWithinClickThreshold = gestureStartPos && currentPos.distanceTo(gestureStartPos) < strokeStartThreshold;
                 if (isWithinClickThreshold && !gestureData[pointerId].hasMovedSignificantly) {
                     eventBuffer.push([eventName, event]);
                     sendToEditor = false;
@@ -757,7 +715,8 @@ class Editor {
     /** `apply` a command. `command` will be announced for accessibility. */
     dispatch(command, addToHistory = true) {
         const dispatchResult = this.dispatchNoAnnounce(command, addToHistory);
-        this.announceForAccessibility(command.description(this, this.localization));
+        const commandDescription = command.description(this, this.localization);
+        this.announceForAccessibility(commandDescription);
         return dispatchResult;
     }
     /**
@@ -971,8 +930,11 @@ class Editor {
      * This is a convenience method that creates **and applies** a single command.
      *
      * If `selectComponents` is true (the default), the components are selected.
+     *
+     * `actionDescription`, if given, should be a screenreader-friendly description of the
+     * reason components were added (e.g. "pasted").
      */
-    async addAndCenterComponents(components, selectComponents = true) {
+    async addAndCenterComponents(components, selectComponents = true, actionDescription) {
         let bbox = null;
         for (const component of components) {
             if (bbox) {
@@ -1003,7 +965,7 @@ class Editor {
             commands.push(component.transformBy(transfm));
         }
         const applyChunkSize = 100;
-        await this.dispatch((0, uniteCommands_1.default)(commands, applyChunkSize), true);
+        await this.dispatch((0, uniteCommands_1.default)(commands, { applyChunkSize, description: actionDescription }), true);
         if (selectComponents) {
             for (const selectionTool of this.toolController.getMatchingTools(SelectionTool_1.default)) {
                 selectionTool.setEnabled(true);
@@ -1023,17 +985,7 @@ class Editor {
      * [[include:doc-pages/inline-examples/adding-an-image-and-data-urls.md]]
      */
     toDataURL(format = 'image/png', outputSize) {
-        const canvas = document.createElement('canvas');
-        const importExportViewport = this.image.getImportExportViewport();
-        const exportRectSize = importExportViewport.getScreenRectSize();
-        const resolution = outputSize ?? exportRectSize;
-        canvas.width = resolution.x;
-        canvas.height = resolution.y;
-        const ctx = canvas.getContext('2d');
-        // Scale to ensure that the entire output is visible.
-        const scaleFactor = Math.min(resolution.x / exportRectSize.x, resolution.y / exportRectSize.y);
-        ctx.scale(scaleFactor, scaleFactor);
-        const renderer = new CanvasRenderer_1.default(ctx, importExportViewport);
+        const { element: canvas, renderer } = CanvasRenderer_1.default.fromViewport(this.image.getImportExportViewport(), { canvasSize: outputSize });
         this.image.renderAll(renderer);
         const dataURL = canvas.toDataURL(format);
         return dataURL;
@@ -1126,8 +1078,59 @@ class Editor {
         }
         return background;
     }
+    /**
+     * This is a convenience method for adding or updating the {@link BackgroundComponent}
+     * and {@link EditorImage.setAutoresizeEnabled} for the current image.
+     *
+     * If there are multiple {@link BackgroundComponent}s in the image, this only modifies
+     * the topmost such element.
+     *
+     * **Example**:
+     * ```ts,runnable
+     * import { Editor, Color4, BackgroundComponentBackgroundType } from 'js-draw';
+     * const editor = new Editor(document.body);
+     * editor.dispatch(editor.setBackgroundStyle({
+     *     color: Color4.orange,
+     *     type: BackgroundComponentBackgroundType.Grid,
+     *     autoresize: true,
+     * }));
+     * ```
+     *
+     * To change the background size, see {@link EditorImage.setImportExportRect}.
+     */
+    setBackgroundStyle(style) {
+        const originalBackground = this.getTopmostBackgroundComponent();
+        const commands = [];
+        if (originalBackground) {
+            commands.push(new Erase_1.default([originalBackground]));
+        }
+        const originalType = originalBackground?.getBackgroundType?.() ?? BackgroundComponent_1.BackgroundType.None;
+        const originalColor = originalBackground?.getStyle?.().color ?? math_1.Color4.transparent;
+        const originalFillsScreen = this.image.getAutoresizeEnabled();
+        const defaultType = (style.color && originalType === BackgroundComponent_1.BackgroundType.None ? BackgroundComponent_1.BackgroundType.SolidColor : originalType);
+        const backgroundType = style.type ?? defaultType;
+        const backgroundColor = style.color ?? originalColor;
+        const fillsScreen = style.autoresize ?? originalFillsScreen;
+        if (backgroundType !== BackgroundComponent_1.BackgroundType.None) {
+            const newBackground = new BackgroundComponent_1.default(backgroundType, backgroundColor);
+            commands.push(EditorImage_1.default.addElement(newBackground));
+        }
+        if (fillsScreen !== originalFillsScreen) {
+            commands.push(this.image.setAutoresizeEnabled(fillsScreen));
+            // Avoid 0x0 backgrounds
+            if (!fillsScreen && this.image.getImportExportRect().maxDimension === 0) {
+                commands.push(this.image.setImportExportRect(this.image.getImportExportRect().resizedTo(math_1.Vec2.of(500, 500))));
+            }
+        }
+        return (0, uniteCommands_1.default)(commands);
+    }
     /**
      * Set the background color of the image.
+     *
+     * This is a convenience method for adding or updating the {@link BackgroundComponent}
+     * for the current image.
+     *
+     * @see {@link setBackgroundStyle}
      */
     setBackgroundColor(color) {
         let background = this.getTopmostBackgroundComponent();

package/dist/cjs/Pointer.d.ts

@@ -35,5 +35,6 @@ export default class Pointer {
      */
     withCanvasPosition(canvasPos: Point2, viewport: Viewport): Pointer;
     static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer;
-    static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null): Pointer;
+    static ofCanvasPoint(canvasPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null, timeStamp?: number | null): Pointer;
+    static ofScreenPoint(screenPos: Point2, isDown: boolean, viewport: Viewport, id?: number, device?: PointerDevice, isPrimary?: boolean, pressure?: number | null, timeStamp?: number | null): Pointer;
 }

package/dist/cjs/Pointer.js

@@ -113,9 +113,16 @@ class Pointer {
     }
     // Create a new Pointer from a point on the canvas.
     // Intended for unit tests.
-    static ofCanvasPoint(canvasPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null) {
+    static ofCanvasPoint(canvasPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null, timeStamp = null) {
         const screenPos = viewport.canvasToScreen(canvasPos);
-        const timeStamp = performance.now();
+        timeStamp ??= performance.now();
+        return new Pointer(screenPos, canvasPos, pressure, isPrimary, isDown, device, id, timeStamp);
+    }
+    // Create a new Pointer from a point on the screen.
+    // Intended for unit tests.
+    static ofScreenPoint(screenPos, isDown, viewport, id = 0, device = PointerDevice.Pen, isPrimary = true, pressure = null, timeStamp = null) {
+        const canvasPos = viewport.screenToCanvas(screenPos);
+        timeStamp ??= performance.now();
         return new Pointer(screenPos, canvasPos, pressure, isPrimary, isDown, device, id, timeStamp);
     }
 }

package/dist/cjs/commands/localization.d.ts

@@ -20,6 +20,7 @@ export interface CommandLocalization {
     duplicateAction: (elemDescription: string, count: number) => string;
     inverseOf: (actionDescription: string) => string;
     unionOf: (actionDescription: string, actionCount: number) => string;
+    andNMoreCommands: (count: number) => string;
     selectedElements: (count: number) => string;
 }
 export declare const defaultCommandLocalization: CommandLocalization;

package/dist/cjs/commands/localization.js

@@ -22,5 +22,6 @@ exports.defaultCommandLocalization = {
     movedRight: 'Moved right',
     zoomedOut: 'Zoomed out',
     zoomedIn: 'Zoomed in',
+    andNMoreCommands: (count) => `And ${count} more commands.`,
     selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
 };

package/dist/cjs/commands/uniteCommands.d.ts

@@ -1,5 +1,9 @@
 import Command from './Command';
 import SerializableCommand from './SerializableCommand';
+export interface UniteCommandsOptions {
+    applyChunkSize?: number;
+    description?: string;
+}
 /**
  * Creates a single command from `commands`. This is useful when undoing should undo *all* commands
  * in `commands` at once, rather than one at a time.
@@ -36,5 +40,5 @@ import SerializableCommand from './SerializableCommand';
  * // applying them shouldn't be done all at once (which would block the UI).
  * ```
  */
-declare const uniteCommands: <T extends Command>(commands: T[], applyChunkSize?: number) => T extends SerializableCommand ? SerializableCommand : Command;
+declare const uniteCommands: <T extends Command>(commands: T[], options?: UniteCommandsOptions | number) => T extends SerializableCommand ? SerializableCommand : Command;
 export default uniteCommands;

package/dist/cjs/commands/uniteCommands.js

@@ -7,10 +7,11 @@ const waitForAll_1 = __importDefault(require("../util/waitForAll"));
 const Command_1 = __importDefault(require("./Command"));
 const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
 class NonSerializableUnion extends Command_1.default {
-    constructor(commands, applyChunkSize) {
+    constructor(commands, applyChunkSize, descriptionOverride) {
         super();
         this.commands = commands;
         this.applyChunkSize = applyChunkSize;
+        this.descriptionOverride = descriptionOverride;
     }
     apply(editor) {
         if (this.applyChunkSize === undefined) {
@@ -36,9 +37,13 @@ class NonSerializableUnion extends Command_1.default {
         this.commands.forEach(command => command.onDrop(editor));
     }
     description(editor, localizationTable) {
+        if (this.descriptionOverride) {
+            return this.descriptionOverride;
+        }
         const descriptions = [];
         let lastDescription = null;
         let duplicateDescriptionCount = 0;
+        let handledCommandCount = 0;
         for (const part of this.commands) {
             const description = part.description(editor, localizationTable);
             if (description !== lastDescription && lastDescription !== null) {
@@ -47,7 +52,13 @@ class NonSerializableUnion extends Command_1.default {
                 duplicateDescriptionCount = 0;
             }
             duplicateDescriptionCount++;
+            handledCommandCount++;
             lastDescription ??= description;
+            // Long descriptions aren't very useful to the user.
+            const maxDescriptionLength = 12;
+            if (descriptions.length > maxDescriptionLength) {
+                break;
+            }
         }
         if (duplicateDescriptionCount > 1) {
             descriptions.push(localizationTable.unionOf(lastDescription, duplicateDescriptionCount));
@@ -55,15 +66,19 @@ class NonSerializableUnion extends Command_1.default {
         else if (duplicateDescriptionCount === 1) {
             descriptions.push(lastDescription);
         }
+        if (handledCommandCount < this.commands.length) {
+            descriptions.push(localizationTable.andNMoreCommands(this.commands.length - handledCommandCount));
+        }
         return descriptions.join(', ');
     }
 }
 class SerializableUnion extends SerializableCommand_1.default {
-    constructor(commands, applyChunkSize) {
+    constructor(commands, applyChunkSize, descriptionOverride) {
         super('union');
         this.commands = commands;
         this.applyChunkSize = applyChunkSize;
-        this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
+        this.descriptionOverride = descriptionOverride;
+        this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize, descriptionOverride);
     }
     serializeToJSON() {
         if (this.serializedData) {
@@ -72,6 +87,7 @@ class SerializableUnion extends SerializableCommand_1.default {
         return {
             applyChunkSize: this.applyChunkSize,
             data: this.commands.map(command => command.serialize()),
+            description: this.descriptionOverride,
         };
     }
     apply(editor) {
@@ -125,7 +141,7 @@ class SerializableUnion extends SerializableCommand_1.default {
  * // applying them shouldn't be done all at once (which would block the UI).
  * ```
  */
-const uniteCommands = (commands, applyChunkSize) => {
+const uniteCommands = (commands, options) => {
     let allSerializable = true;
     for (const command of commands) {
         if (!(command instanceof SerializableCommand_1.default)) {
@@ -133,12 +149,21 @@ const uniteCommands = (commands, applyChunkSize) => {
             break;
         }
     }
+    let applyChunkSize;
+    let description;
+    if (typeof options === 'number') {
+        applyChunkSize = options;
+    }
+    else {
+        applyChunkSize = options?.applyChunkSize;
+        description = options?.description;
+    }
     if (!allSerializable) {
-        return new NonSerializableUnion(commands, applyChunkSize);
+        return new NonSerializableUnion(commands, applyChunkSize, description);
     }
     else {
         const castedCommands = commands;
-        return new SerializableUnion(castedCommands, applyChunkSize);
+        return new SerializableUnion(castedCommands, applyChunkSize, description);
     }
 };
 SerializableCommand_1.default.register('union', (data, editor) => {
@@ -149,10 +174,11 @@ SerializableCommand_1.default.register('union', (data, editor) => {
     if (typeof applyChunkSize !== 'number' && applyChunkSize !== undefined) {
         throw new Error('serialized applyChunkSize is neither undefined nor a number.');
     }
+    const description = typeof data.description === 'string' ? data.description : undefined;
     const commands = [];
     for (const part of data.data) {
         commands.push(SerializableCommand_1.default.deserialize(part, editor));
     }
-    return uniteCommands(commands, applyChunkSize);
+    return uniteCommands(commands, { applyChunkSize, description });
 });
 exports.default = uniteCommands;

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

@@ -1,8 +1,9 @@
 import SerializableCommand from '../commands/SerializableCommand';
 import EditorImage from '../image/EditorImage';
-import { LineSegment2, Mat33, Rect2 } from '@js-draw/math';
+import { LineSegment2, Mat33, Path, Rect2 } from '@js-draw/math';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
+import Viewport from '../Viewport';
 export type LoadSaveData = (string[] | Record<symbol, string | number>);
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
 export type DeserializeCallback = (data: string) => AbstractComponent;
@@ -112,7 +113,9 @@ export default abstract class AbstractComponent {
      * this function.
      */
     intersectsRect(rect: Rect2): boolean;
-    protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
+    isSelectable(): boolean;
+    isBackground(): boolean;
+    getProportionalRenderingTime(): number;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
     /**
      * Returns a command that, when applied, transforms this by [affineTransfm] and
@@ -131,9 +134,6 @@ export default abstract class AbstractComponent {
      *                         this command.
      */
     setZIndexAndTransformBy(affineTransfm: Mat33, newZIndex: number, originalZIndex?: number): SerializableCommand;
-    isSelectable(): boolean;
-    isBackground(): boolean;
-    getProportionalRenderingTime(): number;
     private static transformElementCommandId;
     private static TransformElementCommand;
     /**
@@ -143,6 +143,18 @@ export default abstract class AbstractComponent {
     abstract description(localizationTable: ImageComponentLocalization): string;
     protected abstract createClone(): AbstractComponent;
     clone(): AbstractComponent;
+    /**
+     * **Optional method**: Divides this component into sections roughly along the given path,
+     * removing parts that are roughly within `shape`.
+     *
+     * **Notes**:
+     * - A default implementation may be provided for this method in the future. Until then,
+     *   this method is `undefined` if unsupported.
+     *
+     * `viewport` should be provided to determine how newly-added points should be rounded.
+     */
+    withRegionErased?(shape: Path, viewport: Viewport): AbstractComponent[];
+    protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     serialize(): {
         name: string;
         zIndex: number;

package/dist/cjs/components/AbstractComponent.js

@@ -142,6 +142,21 @@ class AbstractComponent {
         const testLines = rect.getEdges();
         return testLines.some(edge => this.intersects(edge));
     }
+    // @returns true iff this component can be selected (e.g. by the selection tool.)
+    isSelectable() {
+        return true;
+    }
+    // @returns true iff this component should be added to the background, rather than the
+    // foreground of the image.
+    isBackground() {
+        return false;
+    }
+    // @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 command that, when applied, transforms this by [affineTransfm] and
      * updates the editor.
@@ -166,21 +181,6 @@ class AbstractComponent {
     setZIndexAndTransformBy(affineTransfm, newZIndex, originalZIndex) {
         return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this, newZIndex, originalZIndex);
     }
-    // @returns true iff this component can be selected (e.g. by the selection tool.)
-    isSelectable() {
-        return true;
-    }
-    // @returns true iff this component should be added to the background, rather than the
-    // foreground of the image.
-    isBackground() {
-        return false;
-    }
-    // @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/cjs/components/Stroke.d.ts

@@ -6,6 +6,7 @@ import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
 import RenderablePathSpec, { RenderablePathSpecWithPath } from '../rendering/RenderablePathSpec';
+import Viewport from '../Viewport';
 /**
  * Represents an {@link AbstractComponent} made up of one or more {@link Path}s.
  *
@@ -46,10 +47,12 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
      * ]);
      * ```
      */
-    constructor(parts: RenderablePathSpec[]);
+    constructor(parts: RenderablePathSpec[], initialZIndex?: number);
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
     forceStyle(style: ComponentStyle, editor: Editor | null): void;
+    /** @beta -- May fail for concave `path`s */
+    withRegionErased(eraserPath: Path, viewport: Viewport): Stroke[];
     intersects(line: LineSegment2): boolean;
     intersectsRect(rect: Rect2): boolean;
     private simplifiedPath;