js-draw 1.27.1 → 1.28.0

package/dist/mjs/Editor.d.ts

@@ -7,6 +7,7 @@ import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
 import { Point2, Vec2, Color4, Mat33, Rect2 } from '@js-draw/math';
 import Display, { RenderingMode } from './rendering/Display';
+import { SVGLoaderPlugin } from './SVGLoader/SVGLoader';
 import Pointer from './Pointer';
 import { EditorLocalization } from './localization';
 import IconProvider from './toolbar/IconProvider';
@@ -131,6 +132,10 @@ export interface EditorSettings {
         /** Called to write data to the clipboard. Keys in `data` are MIME types. Values are the data associated with that type. */
         write(data: Map<string, Blob | Promise<Blob> | string>): void | Promise<void>;
     } | null;
+    svg: {
+        /** Plugins that create custom components while loading with {@link Editor.loadFromSVG}. */
+        loaderPlugins?: SVGLoaderPlugin[];
+    } | null;
 }
 /**
  * The main entrypoint for the full editor.
@@ -184,10 +189,10 @@ export declare class Editor {
      * const stroke = new Stroke([
      *   pathToRenderable(Path.fromString('M0,0 L100,100 L300,30 z'), { fill: Color4.red }),
      * ]);
-     * const addElementCommand = editor.image.addElement(stroke);
+     * const addComponentCommand = editor.image.addComponent(stroke);
      *
      * // Add the stroke to the editor
-     * editor.dispatch(addElementCommand);
+     * editor.dispatch(addComponentCommand);
      * ```
      */
     readonly image: EditorImage;

package/dist/mjs/Editor.mjs

@@ -120,6 +120,9 @@ export class Editor {
             image: {
                 showImagePicker: settings.image?.showImagePicker ?? undefined,
             },
+            svg: {
+                loaderPlugins: settings.svg?.loaderPlugins ?? [],
+            },
             clipboardApi: settings.clipboardApi ?? null,
         };
         // Validate settings
@@ -1019,7 +1022,7 @@ export class Editor {
         const commands = [];
         for (const component of components) {
             // To allow deserialization, we need to add first, then transform.
-            commands.push(EditorImage.addElement(component));
+            commands.push(EditorImage.addComponent(component));
             commands.push(component.transformBy(transfm));
         }
         const applyChunkSize = 100;
@@ -1099,7 +1102,7 @@ export class Editor {
         const originalBackgrounds = this.image.getBackgroundComponents();
         const eraseBackgroundCommand = new Erase(originalBackgrounds);
         await loader.start(async (component) => {
-            await this.dispatchNoAnnounce(EditorImage.addElement(component));
+            await this.dispatchNoAnnounce(EditorImage.addComponent(component));
         }, (countProcessed, totalToProcess) => {
             if (countProcessed % 500 === 0) {
                 this.showLoadingWarning(countProcessed / totalToProcess);
@@ -1173,7 +1176,7 @@ export class Editor {
         const fillsScreen = style.autoresize ?? originalFillsScreen;
         if (backgroundType !== BackgroundType.None) {
             const newBackground = new BackgroundComponent(backgroundType, backgroundColor);
-            commands.push(EditorImage.addElement(newBackground));
+            commands.push(EditorImage.addComponent(newBackground));
         }
         if (fillsScreen !== originalFillsScreen) {
             commands.push(this.image.setAutoresizeEnabled(fillsScreen));
@@ -1199,7 +1202,7 @@ export class Editor {
                 ? BackgroundType.None
                 : BackgroundType.SolidColor;
             background = new BackgroundComponent(backgroundType, color);
-            return this.image.addElement(background);
+            return this.image.addComponent(background);
         }
         else {
             return background.updateStyle({ color });
@@ -1248,7 +1251,10 @@ export class Editor {
      * ```
      */
     async loadFromSVG(svgData, sanitize = false) {
-        const loader = SVGLoader.fromString(svgData, sanitize);
+        const loader = SVGLoader.fromString(svgData, {
+            sanitize,
+            plugins: this.getCurrentSettings().svg?.loaderPlugins,
+        });
         await this.loadFrom(loader);
     }
     /**

package/dist/mjs/SVGLoader/SVGLoader.d.ts

@@ -11,6 +11,25 @@ export type SVGLoaderUnknownStyleAttribute = {
     value: string;
     priority?: string;
 };
+export interface SVGLoaderControl {
+    /** Call this to add a component to the editor. */
+    addComponent: ComponentAddedListener;
+}
+/**
+ * Loads custom components from an SVG image.
+ * @see SVGLoader.fromString
+ */
+export interface SVGLoaderPlugin {
+    /**
+     * Called when the {@link SVGLoader} encounters a `node`.
+     *
+     * Call `loader.addComponent` to add new components to the image.
+     *
+     * Returning `true` prevents the {@link SVGLoader} from doing further
+     * processing on the node.
+     */
+    visit(node: Element, loader: SVGLoaderControl): Promise<boolean>;
+}
 export declare enum SVGLoaderLoadMethod {
     IFrame = "iframe",
     DOMParser = "domparser"
@@ -18,6 +37,7 @@ export declare enum SVGLoaderLoadMethod {
 export interface SVGLoaderOptions {
     sanitize?: boolean;
     disableUnknownObjectWarnings?: boolean;
+    plugins?: SVGLoaderPlugin[];
     loadMethod?: SVGLoaderLoadMethod;
 }
 export default class SVGLoader implements ImageLoader {
@@ -31,6 +51,7 @@ export default class SVGLoader implements ImageLoader {
     private rootViewBox;
     private readonly storeUnknown;
     private readonly disableUnknownObjectWarnings;
+    private readonly plugins;
     private constructor();
     private getStyle;
     private strokeDataFromElem;

package/dist/mjs/SVGLoader/SVGLoader.mjs

@@ -39,6 +39,7 @@ export default class SVGLoader {
         this.totalToProcess = 0;
         this.containerGroupIDs = [];
         this.encounteredIDs = [];
+        this.plugins = options.plugins ?? [];
         this.storeUnknown = !(options.sanitize ?? false);
         this.disableUnknownObjectWarnings = !!options.disableUnknownObjectWarnings;
     }
@@ -434,56 +435,78 @@ export default class SVGLoader {
     async visit(node) {
         this.totalToProcess += node.childElementCount;
         let visitChildren = true;
-        switch (node.tagName.toLowerCase()) {
-            case 'g':
-                if (node.classList.contains(imageBackgroundCSSClassName)) {
-                    await this.addBackground(node);
+        const visitPlugin = async () => {
+            for (const plugin of this.plugins) {
+                const processed = await plugin.visit(node, {
+                    addComponent: (component) => {
+                        return this.onAddComponent?.(component);
+                    },
+                });
+                if (processed) {
                     visitChildren = false;
+                    return true;
                 }
-                else {
-                    await this.startGroup(node);
-                }
-                // Otherwise, continue -- visit the node's children.
-                break;
-            case 'path':
-                if (node.classList.contains(imageBackgroundCSSClassName)) {
-                    await this.addBackground(node);
-                }
-                else {
-                    await this.addPath(node);
-                }
-                break;
-            case 'text':
-                await this.addText(node);
-                visitChildren = false;
-                break;
-            case 'image':
-                await this.addImage(node);
-                // Images should not have children.
-                visitChildren = false;
-                break;
-            case 'svg':
-                this.updateViewBox(node);
-                this.updateSVGAttrs(node);
-                break;
-            case 'style':
-                // Keeping unnecessary style sheets can cause the browser to keep all
-                // SVG elements *referenced* by the style sheet in some browsers.
-                //
-                // Only keep the style sheet if it won't be discarded on save.
-                if (node.getAttribute('id') !== renderedStylesheetId) {
-                    await this.addUnknownNode(node);
-                }
-                break;
-            default:
-                if (!this.disableUnknownObjectWarnings) {
-                    console.warn('Unknown SVG element,', node, node.tagName);
-                    if (!(node instanceof SVGElement)) {
-                        console.warn('Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.');
+            }
+            return false;
+        };
+        const visitBuiltIn = async () => {
+            switch (node.tagName.toLowerCase()) {
+                case 'g':
+                    if (node.classList.contains(imageBackgroundCSSClassName)) {
+                        await this.addBackground(node);
+                        visitChildren = false;
                     }
-                }
-                await this.addUnknownNode(node);
-                return;
+                    else {
+                        await this.startGroup(node);
+                    }
+                    // Otherwise, continue -- visit the node's children.
+                    break;
+                case 'path':
+                    if (node.classList.contains(imageBackgroundCSSClassName)) {
+                        await this.addBackground(node);
+                    }
+                    else {
+                        await this.addPath(node);
+                    }
+                    break;
+                case 'text':
+                    await this.addText(node);
+                    visitChildren = false;
+                    break;
+                case 'image':
+                    await this.addImage(node);
+                    // Images should not have children.
+                    visitChildren = false;
+                    break;
+                case 'svg':
+                    this.updateViewBox(node);
+                    this.updateSVGAttrs(node);
+                    break;
+                case 'style':
+                    // Keeping unnecessary style sheets can cause the browser to keep all
+                    // SVG elements *referenced* by the style sheet in some browsers.
+                    //
+                    // Only keep the style sheet if it won't be discarded on save.
+                    if (node.getAttribute('id') !== renderedStylesheetId) {
+                        await this.addUnknownNode(node);
+                    }
+                    break;
+                default:
+                    if (!this.disableUnknownObjectWarnings) {
+                        console.warn('Unknown SVG element,', node, node.tagName);
+                        if (!(node instanceof SVGElement)) {
+                            console.warn('Element', node, 'is not an SVGElement!', this.storeUnknown ? 'Continuing anyway.' : 'Skipping.');
+                        }
+                    }
+                    await this.addUnknownNode(node);
+                    return;
+            }
+        };
+        if (await visitPlugin()) {
+            visitChildren = false;
+        }
+        else {
+            await visitBuiltIn();
         }
         if (visitChildren) {
             for (const child of node.children) {
@@ -602,17 +625,21 @@ export default class SVGLoader {
         // Handle options
         let sanitize;
         let disableUnknownObjectWarnings;
+        let plugins;
         if (typeof options === 'boolean') {
             sanitize = options;
             disableUnknownObjectWarnings = false;
+            plugins = [];
         }
         else {
             sanitize = options.sanitize ?? false;
             disableUnknownObjectWarnings = options.disableUnknownObjectWarnings ?? false;
+            plugins = options.plugins;
         }
         return new SVGLoader(svgElem, cleanUp, {
             sanitize,
             disableUnknownObjectWarnings,
+            plugins,
         });
     }
 }

package/dist/mjs/SVGLoader/SVGLoader.plugins.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/Viewport.mjs

@@ -12,6 +12,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 var _inverseTransform, _a;
 import  Command  from './commands/Command.mjs';
 import { Mat33, Rect2, Vec2, Vec3 } from '@js-draw/math';
+import  describeTransformation  from './util/describeTransformation.mjs';
 export class ViewportTransform extends Command {
 }
 export class Viewport {
@@ -234,38 +235,7 @@ Viewport.ViewportTransform = (_a = class extends ViewportTransform {
             editor.queueRerender();
         }
         description(editor, localizationTable) {
-            const result = [];
-            // Describe the transformation's affect on the viewport (note that transformation transforms
-            // the **elements** within the viewport). Assumes the transformation only does rotation/scale/translation.
-            const origVec = editor.viewport.visibleRect.center;
-            const linearTransformedVec = this.transform.transformVec3(Vec2.unitX);
-            const affineTransformedVec = this.transform.transformVec2(origVec);
-            const scale = linearTransformedVec.magnitude();
-            const rotation = (180 / Math.PI) * linearTransformedVec.angle();
-            const translation = affineTransformedVec.minus(origVec);
-            if (scale > 1.2) {
-                result.push(localizationTable.zoomedIn);
-            }
-            else if (scale < 0.8) {
-                result.push(localizationTable.zoomedOut);
-            }
-            if (Math.floor(Math.abs(rotation)) > 0) {
-                result.push(localizationTable.rotatedBy(Math.round(rotation)));
-            }
-            const minTranslation = 1e-4;
-            if (translation.x > minTranslation) {
-                result.push(localizationTable.movedLeft);
-            }
-            else if (translation.x < -minTranslation) {
-                result.push(localizationTable.movedRight);
-            }
-            if (translation.y < -minTranslation) {
-                result.push(localizationTable.movedDown);
-            }
-            else if (translation.y > minTranslation) {
-                result.push(localizationTable.movedUp);
-            }
-            return result.join('; ');
+            return describeTransformation(editor.viewport.visibleRect.center, this.transform, true, localizationTable);
         }
     },
     _inverseTransform = new WeakMap(),

package/dist/mjs/commands/Duplicate.d.ts

@@ -12,7 +12,7 @@ import SerializableCommand from './SerializableCommand';
  *
  * // Find all elements intersecting the rectangle with top left (0,0) and
  * // (width,height)=(100,100).
- * const elems = editor.image.getElementsIntersectingRegion(
+ * const elems = editor.image.getComponentsIntersecting(
  * 	new Rect2(0, 0, 100, 100)
  * );
  *
@@ -23,16 +23,19 @@ import SerializableCommand from './SerializableCommand';
  * editor.dispatch(duplicateElems);
  * ```
  *
- * @see {@link Editor.dispatch} {@link EditorImage.getElementsIntersectingRegion}
+ * @see {@link Editor.dispatch} {@link EditorImage.getComponentsIntersecting}
  */
 export default class Duplicate extends SerializableCommand {
     private toDuplicate;
     private duplicates;
     private reverse;
-    constructor(toDuplicate: AbstractComponent[]);
+    constructor(toDuplicate: AbstractComponent[], idsForDuplicates?: string[]);
     apply(editor: Editor): void;
     unapply(editor: Editor): void;
     onDrop(editor: Editor): void;
     description(_editor: Editor, localizationTable: EditorLocalization): string;
-    protected serializeToJSON(): string[];
+    protected serializeToJSON(): {
+        originalIds: string[];
+        cloneIds: string[];
+    };
 }

package/dist/mjs/commands/Duplicate.mjs

@@ -1,4 +1,5 @@
 import  describeComponentList  from '../components/util/describeComponentList.mjs';
+import  { assertIsStringArray }  from '../util/assertions.mjs';
 import  Erase  from './Erase.mjs';
 import  SerializableCommand  from './SerializableCommand.mjs';
 /**
@@ -11,7 +12,7 @@ import  SerializableCommand  from './SerializableCommand.mjs';
  *
  * // Find all elements intersecting the rectangle with top left (0,0) and
  * // (width,height)=(100,100).
- * const elems = editor.image.getElementsIntersectingRegion(
+ * const elems = editor.image.getComponentsIntersecting(
  * 	new Rect2(0, 0, 100, 100)
  * );
  *
@@ -22,13 +23,24 @@ import  SerializableCommand  from './SerializableCommand.mjs';
  * editor.dispatch(duplicateElems);
  * ```
  *
- * @see {@link Editor.dispatch} {@link EditorImage.getElementsIntersectingRegion}
+ * @see {@link Editor.dispatch} {@link EditorImage.getComponentsIntersecting}
  */
 class Duplicate extends SerializableCommand {
-    constructor(toDuplicate) {
+    constructor(toDuplicate, 
+    // @internal -- IDs given to the duplicate elements
+    idsForDuplicates) {
         super('duplicate');
         this.toDuplicate = toDuplicate;
-        this.duplicates = toDuplicate.map((elem) => elem.clone());
+        this.duplicates = toDuplicate.map((elem, idx) => {
+            // For collaborative editing, it's important for the clones to have
+            // the same IDs as the originals
+            if (idsForDuplicates && idsForDuplicates[idx]) {
+                return elem.cloneWithId(idsForDuplicates[idx]);
+            }
+            else {
+                return elem.clone();
+            }
+        });
         this.reverse = new Erase(this.duplicates);
     }
     apply(editor) {
@@ -47,13 +59,42 @@ class Duplicate extends SerializableCommand {
         return localizationTable.duplicateAction(describeComponentList(localizationTable, this.duplicates) ?? localizationTable.elements, this.duplicates.length);
     }
     serializeToJSON() {
-        return this.toDuplicate.map((elem) => elem.getId());
+        return {
+            originalIds: this.toDuplicate.map((elem) => elem.getId()),
+            cloneIds: this.duplicates.map((elem) => elem.getId()),
+        };
     }
 }
 (() => {
     SerializableCommand.register('duplicate', (json, editor) => {
-        const elems = json.map((id) => editor.image.lookupElement(id));
-        return new Duplicate(elems);
+        let originalIds;
+        let cloneIds;
+        // Compatibility with older editors
+        if (Array.isArray(json)) {
+            originalIds = json;
+            cloneIds = [];
+        }
+        else {
+            originalIds = json.originalIds;
+            cloneIds = json.cloneIds;
+        }
+        assertIsStringArray(originalIds);
+        assertIsStringArray(cloneIds);
+        // Resolve to elements -- only keep the elements that can be found in the image.
+        const resolvedElements = [];
+        const filteredCloneIds = [];
+        for (let i = 0; i < originalIds.length; i++) {
+            const originalId = originalIds[i];
+            const foundElement = editor.image.lookupElement(originalId);
+            if (!foundElement) {
+                console.warn('Duplicate command: Could not find element with ID', originalId);
+            }
+            else {
+                filteredCloneIds.push(cloneIds[i]);
+                resolvedElements.push(foundElement);
+            }
+        }
+        return new Duplicate(resolvedElements, filteredCloneIds);
     });
 })();
 export default Duplicate;

package/dist/mjs/commands/Duplicate.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/commands/Erase.d.ts

@@ -31,7 +31,7 @@ import SerializableCommand from './SerializableCommand';
  *
  * // Find all elements intersecting the rectangle with top left (-10,-30) and
  * // (width,height)=(50,100).
- * const elems = editor.image.getElementsIntersectingRegion(
+ * const elems = editor.image.getComponentsIntersecting(
  * 	new Rect2(-10, -30, 50, 100)
  * );
  *

package/dist/mjs/commands/Erase.mjs

@@ -31,7 +31,7 @@ import  SerializableCommand  from './SerializableCommand.mjs';
  *
  * // Find all elements intersecting the rectangle with top left (-10,-30) and
  * // (width,height)=(50,100).
- * const elems = editor.image.getElementsIntersectingRegion(
+ * const elems = editor.image.getComponentsIntersecting(
  * 	new Rect2(-10, -30, 50, 100)
  * );
  *
@@ -63,7 +63,7 @@ class Erase extends SerializableCommand {
     unapply(editor) {
         for (const part of this.toRemove) {
             if (!editor.image.findParent(part)) {
-                EditorImage.addElement(part).apply(editor);
+                EditorImage.addComponent(part).apply(editor);
             }
         }
         this.applied = false;

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

@@ -11,11 +11,11 @@ export interface CommandLocalization {
     duplicatedNoElements: string;
     elements: string;
     updatedViewport: string;
-    transformedElements: (elemCount: number) => string;
+    transformedElements: (elemCount: number, transformDescription: string) => string;
     resizeOutputCommand: (newSize: Rect2) => string;
     enabledAutoresizeOutputCommand: string;
     disabledAutoresizeOutputCommand: string;
-    addElementAction: (elemDescription: string) => string;
+    addComponentAction: (elemDescription: string) => string;
     eraseAction: (elemDescription: string, numElems: number) => string;
     duplicateAction: (elemDescription: string, count: number) => string;
     inverseOf: (actionDescription: string) => string;

package/dist/mjs/commands/localization.mjs

@@ -1,10 +1,10 @@
 export const defaultCommandLocalization = {
     updatedViewport: 'Transformed Viewport',
-    transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
+    transformedElements: (elemCount, action) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'} (${action})`,
     resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
     enabledAutoresizeOutputCommand: 'Enabled output autoresize',
     disabledAutoresizeOutputCommand: 'Disabled output autoresize',
-    addElementAction: (componentDescription) => `Added ${componentDescription}`,
+    addComponentAction: (componentDescription) => `Added ${componentDescription}`,
     eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
     duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
     unionOf: (actionDescription, actionCount) => `Union: ${actionCount} ${actionDescription}`,

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

@@ -158,6 +158,13 @@ export default abstract class AbstractComponent {
     abstract description(localizationTable: ImageComponentLocalization): string;
     protected abstract createClone(): AbstractComponent;
     clone(): AbstractComponent;
+    /**
+     * Creates a copy of this component with a particular `id`.
+     * This is used internally by {@link Duplicate} when deserializing.
+     *
+     * @internal -- users of the library shouldn't need this.
+     */
+    cloneWithId(cloneId: string): AbstractComponent;
     /**
      * **Optional method**: Divides this component into sections roughly along the given path,
      * removing parts that are roughly within `shape`.

package/dist/mjs/components/AbstractComponent.mjs

@@ -5,8 +5,10 @@ var __setFunctionName = (this && this.__setFunctionName) || function (f, name, p
 var _a;
 import  SerializableCommand  from '../commands/SerializableCommand.mjs';
 import  EditorImage  from '../image/EditorImage.mjs';
-import { Mat33 } from '@js-draw/math';
+import { Mat33, Vec2 } from '@js-draw/math';
 import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
+import  describeTransformation  from '../util/describeTransformation.mjs';
+import  { assertIsString }  from '../util/assertions.mjs';
 export var ComponentSizingMode;
 (function (ComponentSizingMode) {
     /** The default. The compnent gets its size from its bounding box. */
@@ -201,6 +203,17 @@ class AbstractComponent {
         }
         return clone;
     }
+    /**
+     * Creates a copy of this component with a particular `id`.
+     * This is used internally by {@link Duplicate} when deserializing.
+     *
+     * @internal -- users of the library shouldn't need this.
+     */
+    cloneWithId(cloneId) {
+        const clone = this.clone();
+        clone.id = cloneId;
+        return clone;
+    }
     // Convert the component to an object that can be passed to
     // `JSON.stringify`.
     //
@@ -244,6 +257,7 @@ class AbstractComponent {
         if (AbstractComponent.isNotDeserializable(json)) {
             throw new Error(`Element with data ${json} cannot be deserialized.`);
         }
+        assertIsString(json.id);
         const instance = this.deserializationCallbacks[json.name](json.data);
         instance.id = json.id;
         if (isFinite(json.zIndex)) {
@@ -307,7 +321,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
             }
             // Add the element back to the document.
             if (hadParent) {
-                EditorImage.addElement(this.component).apply(editor);
+                EditorImage.addComponent(this.component).apply(editor);
             }
         }
         apply(editor) {
@@ -321,7 +335,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerial
             editor.queueRerender();
         }
         description(_editor, localizationTable) {
-            return localizationTable.transformedElements(1);
+            return localizationTable.transformedElements(1, describeTransformation(Vec2.zero, this.affineTransfm, false, localizationTable));
         }
         serializeToJSON() {
             return {

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

@@ -1,7 +1,8 @@
 import SerializableCommand from '../commands/SerializableCommand';
-import { Mat33, Path, Rect2, LineSegment2 } from '@js-draw/math';
+import { Mat33, Path, Rect2, LineSegment2, Color4 } from '@js-draw/math';
 import Editor from '../Editor';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import { StrokeStyle } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
@@ -48,6 +49,25 @@ export default class Stroke extends AbstractComponent implements RestyleableComp
      * ```
      */
     constructor(parts: RenderablePathSpec[], initialZIndex?: number);
+    /**
+     * Creates a new `Stroke` from a {@link Path} and `style`. Strokes created
+     * with this method have transparent fill.
+     *
+     * Example:
+     * ```ts,runnable
+     * import { Editor, Stroke, Color4 } from 'js-draw';
+     * const editor = new Editor(document.body);
+     * ---visible---
+     * const stroke = Stroke.fromStroked('m0,0 l10,10', { width: 10, color: Color4.red });
+     * editor.dispatch(editor.image.addComponent(stroke));
+     * ```
+     * Notice that `path` can be a string that specifies an SVG path
+     *
+     * @see fromFilled
+     */
+    static fromStroked(path: Path | string, style: StrokeStyle): Stroke;
+    /** @see fromStroked */
+    static fromFilled(path: Path | string, fill: Color4): Stroke;
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
     forceStyle(style: ComponentStyle, editor: Editor | null): void;