js-draw 0.13.1 → 0.15.0

package/dist/src/Color4.d.ts

@@ -32,6 +32,10 @@ export default class Color4 {
      * ```
      */
     mix(other: Color4, fractionTo: number): Color4;
+    /**
+     * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
+     */
+    static average(colors: Color4[]): Color4;
     private hexString;
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.

package/dist/src/Color4.js

@@ -121,6 +121,28 @@ export default class Color4 {
         const fractionOfThis = 1 - fractionTo;
         return new Color4(this.r * fractionOfThis + other.r * fractionTo, this.g * fractionOfThis + other.g * fractionTo, this.b * fractionOfThis + other.b * fractionTo, this.a * fractionOfThis + other.a * fractionTo);
     }
+    /**
+     * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
+     */
+    static average(colors) {
+        let averageA = 0;
+        let averageR = 0;
+        let averageG = 0;
+        let averageB = 0;
+        for (const color of colors) {
+            averageA += color.a;
+            averageR += color.r;
+            averageG += color.g;
+            averageB += color.b;
+        }
+        if (colors.length > 0) {
+            averageA /= colors.length;
+            averageR /= colors.length;
+            averageG /= colors.length;
+            averageB /= colors.length;
+        }
+        return new Color4(averageR, averageG, averageB, averageA);
+    }
     /**
      * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
      *

package/dist/src/Editor.d.ts

@@ -192,7 +192,7 @@ export declare class Editor {
      */
     asyncApplyOrUnapplyCommands(commands: Command[], apply: boolean, updateChunkSize: number): Promise<void>;
     asyncApplyCommands(commands: Command[], chunkSize: number): Promise<void>;
-    asyncUnapplyCommands(commands: Command[], chunkSize: number): Promise<void>;
+    asyncUnapplyCommands(commands: Command[], chunkSize: number, unapplyInReverseOrder?: boolean): Promise<void>;
     private announceUndoCallback;
     private announceRedoCallback;
     private nextRerenderListeners;
@@ -204,6 +204,7 @@ export declare class Editor {
      * @returns a promise that resolves when
      */
     queueRerender(): Promise<void>;
+    isRerenderQueued(): boolean;
     rerender(showImageBounds?: boolean): void;
     /**
      * @see {@link Display.getWetInkRenderer} {@link Display.flatten}

package/dist/src/Editor.js

@@ -196,7 +196,7 @@ export class Editor {
             let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
             // Process wheel events if the ctrl key is down, even if disabled -- we do want to handle
             // pinch-zooming.
-            if (!evt.ctrlKey) {
+            if (!evt.ctrlKey && !evt.metaKey) {
                 if (!this.settings.wheelEventsEnabled) {
                     return;
                 }
@@ -213,7 +213,7 @@ export class Editor {
             else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
                 delta = delta.times(100);
             }
-            if (evt.ctrlKey) {
+            if (evt.ctrlKey || evt.metaKey) {
                 delta = Vec3.of(0, 0, evt.deltaY);
             }
             // Ensure that `pos` is relative to `this.container`
@@ -441,7 +441,7 @@ export class Editor {
             else if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.KeyPressEvent,
                 key: evt.key,
-                ctrlKey: evt.ctrlKey,
+                ctrlKey: evt.ctrlKey || evt.metaKey,
                 altKey: evt.altKey,
             })) {
                 evt.preventDefault();
@@ -454,7 +454,7 @@ export class Editor {
             if (this.toolController.dispatchInputEvent({
                 kind: InputEvtType.KeyUpEvent,
                 key: evt.key,
-                ctrlKey: evt.ctrlKey,
+                ctrlKey: evt.ctrlKey || evt.metaKey,
                 altKey: evt.altKey,
             })) {
                 evt.preventDefault();
@@ -535,8 +535,13 @@ export class Editor {
     asyncApplyCommands(commands, chunkSize) {
         return this.asyncApplyOrUnapplyCommands(commands, true, chunkSize);
     }
+    // If `unapplyInReverseOrder`, commands are reversed before unapplying.
     // @see {@link #asyncApplyOrUnapplyCommands }
-    asyncUnapplyCommands(commands, chunkSize) {
+    asyncUnapplyCommands(commands, chunkSize, unapplyInReverseOrder = false) {
+        if (unapplyInReverseOrder) {
+            commands = [...commands]; // copy
+            commands.reverse();
+        }
         return this.asyncApplyOrUnapplyCommands(commands, false, chunkSize);
     }
     /**
@@ -561,6 +566,10 @@ export class Editor {
             this.nextRerenderListeners.push(() => resolve());
         });
     }
+    // @internal
+    isRerenderQueued() {
+        return this.rerenderQueued;
+    }
     rerender(showImageBounds = true) {
         this.display.startRerender();
         // Don't render if the display has zero size.

package/dist/src/EditorImage.d.ts

@@ -10,6 +10,7 @@ export default class EditorImage {
     private componentsById;
     constructor();
     findParent(elem: AbstractComponent): ImageNode | null;
+    queueRerenderOf(elem: AbstractComponent): void;
     /** @internal */
     renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport): void;
     /** @internal */

package/dist/src/EditorImage.js

@@ -23,6 +23,17 @@ export default class EditorImage {
         }
         return null;
     }
+    // Forces a re-render of `elem` when the image is next re-rendered as a whole.
+    // Does nothing if `elem` is not in this.
+    queueRerenderOf(elem) {
+        // TODO: Make more efficient (e.g. increase IDs of all parents,
+        // make cache take into account last modified time instead of IDs, etc.)
+        const parent = this.findParent(elem);
+        if (parent) {
+            parent.remove();
+            this.addElementDirectly(elem);
+        }
+    }
     /** @internal */
     renderWithCache(screenRenderer, cache, viewport) {
         cache.render(screenRenderer, this.root, viewport);

package/dist/src/SVGLoader.js

@@ -202,7 +202,13 @@ export default class SVGLoader {
         }
         // Compute styles.
         const computedStyles = window.getComputedStyle(elem);
-        const fontSizeMatch = /^([-0-9.e]+)px/i.exec(computedStyles.fontSize);
+        const fontSizeExp = /^([-0-9.e]+)px/i;
+        // In some environments, computedStyles.fontSize can be increased by the system.
+        // Thus, to prevent text from growing on load/save, prefer .style.fontSize.
+        let fontSizeMatch = fontSizeExp.exec(elem.style.fontSize);
+        if (!fontSizeMatch) {
+            fontSizeMatch = fontSizeExp.exec(computedStyles.fontSize);
+        }
         const supportedStyleAttrs = [
             'fontFamily',
             'transform',
@@ -390,7 +396,7 @@ export default class SVGLoader {
 					<meta name='viewport' conent='width=device-width,initial-scale=1.0'/>
 					<meta charset='utf-8'/>
 				</head>
-				<body>
+				<body style='font-size: 12px;'>
 					<script>
 						console.error('JavaScript should not be able to run here!');
 						throw new Error(

package/dist/src/Viewport.d.ts

@@ -44,6 +44,7 @@ export declare class Viewport {
      * should return `100` because `100` is the nearest power of 10 to 101.
      */
     getScaleFactorToNearestPowerOfTen(): number;
+    private getScaleFactorToNearestPowerOf;
     snapToGrid(canvasPos: Point2): Vec3;
     /** Returns the size of one screen pixel in canvas units. */
     getSizeOfPixelOnCanvas(): number;

package/dist/src/Viewport.js

@@ -84,13 +84,16 @@ export class Viewport {
      * should return `100` because `100` is the nearest power of 10 to 101.
      */
     getScaleFactorToNearestPowerOfTen() {
+        return this.getScaleFactorToNearestPowerOf(10);
+    }
+    getScaleFactorToNearestPowerOf(powerOf) {
         const scaleFactor = this.getScaleFactor();
-        return Math.pow(10, Math.round(Math.log10(scaleFactor)));
+        return Math.pow(powerOf, Math.round(Math.log(scaleFactor) / Math.log(powerOf)));
     }
     snapToGrid(canvasPos) {
         const snapCoordinate = (coordinate) => {
-            const scaleFactor = this.getScaleFactorToNearestPowerOfTen();
-            const roundFactor = scaleFactor / 100;
+            const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
+            const roundFactor = scaleFactor / 50;
             const snapped = Math.round(coordinate * roundFactor) / roundFactor;
             return snapped;
         };

package/dist/src/commands/UnresolvedCommand.d.ts

@@ -0,0 +1,14 @@
+import EditorImage from '../EditorImage';
+import AbstractComponent from '../components/AbstractComponent';
+import SerializableCommand from './SerializableCommand';
+export type ResolveFromComponentCallback = () => SerializableCommand;
+/**
+ * A command that requires a component that may or may not be present in the editor when
+ * the command is created.
+ */
+export default abstract class UnresolvedSerializableCommand extends SerializableCommand {
+    protected component: AbstractComponent | null;
+    protected readonly componentID: string;
+    protected constructor(commandId: string, componentID: string, component?: AbstractComponent);
+    protected resolveComponent(image: EditorImage): void;
+}

package/dist/src/commands/UnresolvedCommand.js

@@ -0,0 +1,22 @@
+import SerializableCommand from './SerializableCommand';
+/**
+ * A command that requires a component that may or may not be present in the editor when
+ * the command is created.
+ */
+export default class UnresolvedSerializableCommand extends SerializableCommand {
+    constructor(commandId, componentID, component) {
+        super(commandId);
+        this.component = component !== null && component !== void 0 ? component : null;
+        this.componentID = componentID;
+    }
+    resolveComponent(image) {
+        if (this.component) {
+            return;
+        }
+        const component = image.lookupElement(this.componentID);
+        if (!component) {
+            throw new Error(`Unable to resolve component with ID ${this.componentID}`);
+        }
+        this.component = component;
+    }
+}

package/dist/src/commands/uniteCommands.js

@@ -27,12 +27,14 @@ class NonSerializableUnion extends Command {
         }
     }
     unapply(editor) {
+        const commands = [...this.commands];
+        commands.reverse();
         if (this.applyChunkSize === undefined) {
-            const results = this.commands.map(cmd => cmd.unapply(editor));
+            const results = commands.map(cmd => cmd.unapply(editor));
             return NonSerializableUnion.waitForAll(results);
         }
         else {
-            return editor.asyncUnapplyCommands(this.commands, this.applyChunkSize);
+            return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
         }
     }
     description(editor, localizationTable) {

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

@@ -48,7 +48,6 @@ export default abstract class AbstractComponent {
     isSelectable(): boolean;
     getProportionalRenderingTime(): number;
     private static transformElementCommandId;
-    private static UnresolvedTransformElementCommand;
     private static TransformElementCommand;
     /**
      * @return a description that could be read by a screen reader

package/dist/src/components/AbstractComponent.js

@@ -2,6 +2,7 @@ var _a;
 import SerializableCommand from '../commands/SerializableCommand';
 import EditorImage from '../EditorImage';
 import Mat33 from '../math/Mat33';
+import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
 /**
  * A base class for everything that can be added to an {@link EditorImage}.
  */
@@ -75,11 +76,11 @@ export default class AbstractComponent {
     // Returns a command that, when applied, transforms this by [affineTransfm] and
     // updates the editor.
     transformBy(affineTransfm) {
-        return new AbstractComponent.TransformElementCommand(affineTransfm, this);
+        return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
     }
     // Returns a command that updates this component's z-index.
     setZIndex(newZIndex) {
-        return new AbstractComponent.TransformElementCommand(Mat33.identity, this, newZIndex);
+        return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex);
     }
     // @returns true iff this component can be selected (e.g. by the selection tool.)
     isSelectable() {
@@ -158,52 +159,31 @@ export default class AbstractComponent {
 AbstractComponent.zIndexCounter = 0;
 AbstractComponent.deserializationCallbacks = {};
 AbstractComponent.transformElementCommandId = 'transform-element';
-AbstractComponent.UnresolvedTransformElementCommand = class extends SerializableCommand {
-    constructor(affineTransfm, componentID, targetZIndex) {
-        super(AbstractComponent.transformElementCommandId);
-        this.affineTransfm = affineTransfm;
-        this.componentID = componentID;
-        this.targetZIndex = targetZIndex;
-        this.command = null;
-    }
-    resolveCommand(editor) {
-        if (this.command) {
-            return;
-        }
-        const component = editor.image.lookupElement(this.componentID);
-        if (!component) {
-            throw new Error(`Unable to resolve component with ID ${this.componentID}`);
-        }
-        this.command = new AbstractComponent.TransformElementCommand(this.affineTransfm, component, this.targetZIndex);
-    }
-    apply(editor) {
-        this.resolveCommand(editor);
-        this.command.apply(editor);
-    }
-    unapply(editor) {
-        this.resolveCommand(editor);
-        this.command.unapply(editor);
-    }
-    description(_editor, localizationTable) {
-        return localizationTable.transformedElements(1);
-    }
-    serializeToJSON() {
-        return {
-            id: this.componentID,
-            transfm: this.affineTransfm.toArray(),
-            targetZIndex: this.targetZIndex,
-        };
-    }
-};
-AbstractComponent.TransformElementCommand = (_a = class extends SerializableCommand {
-        constructor(affineTransfm, component, targetZIndex) {
-            super(AbstractComponent.transformElementCommandId);
+AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerializableCommand {
+        // Construct a new TransformElementCommand. `component`, while optional, should
+        // be provided if available. If not provided, it will be fetched from the editor's
+        // document when the command is applied.
+        constructor(affineTransfm, componentID, component, targetZIndex) {
+            super(AbstractComponent.transformElementCommandId, componentID, component);
             this.affineTransfm = affineTransfm;
-            this.component = component;
-            this.origZIndex = component.zIndex;
+            this.origZIndex = null;
             this.targetZIndex = targetZIndex !== null && targetZIndex !== void 0 ? targetZIndex : AbstractComponent.zIndexCounter++;
+            // Ensure that we keep drawing on top even after changing the z-index.
+            if (this.targetZIndex >= AbstractComponent.zIndexCounter) {
+                AbstractComponent.zIndexCounter = this.targetZIndex + 1;
+            }
+        }
+        resolveComponent(image) {
+            if (this.component) {
+                return;
+            }
+            super.resolveComponent(image);
+            this.origZIndex = this.component.getZIndex();
         }
         updateTransform(editor, newTransfm) {
+            if (!this.component) {
+                throw new Error('this.component is undefined or null!');
+            }
             // Any parent should have only one direct child.
             const parent = editor.image.findParent(this.component);
             let hadParent = false;
@@ -219,11 +199,13 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
             }
         }
         apply(editor) {
+            this.resolveComponent(editor.image);
             this.component.zIndex = this.targetZIndex;
             this.updateTransform(editor, this.affineTransfm);
             editor.queueRerender();
         }
         unapply(editor) {
+            this.resolveComponent(editor.image);
             this.component.zIndex = this.origZIndex;
             this.updateTransform(editor, this.affineTransfm.inverse());
             editor.queueRerender();
@@ -233,7 +215,7 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
         }
         serializeToJSON() {
             return {
-                id: this.component.getId(),
+                id: this.componentID,
                 transfm: this.affineTransfm.toArray(),
                 targetZIndex: this.targetZIndex,
             };
@@ -241,13 +223,11 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
     },
     (() => {
         SerializableCommand.register(AbstractComponent.transformElementCommandId, (json, editor) => {
-            const elem = editor.image.lookupElement(json.id);
+            var _a;
+            const elem = (_a = editor.image.lookupElement(json.id)) !== null && _a !== void 0 ? _a : undefined;
             const transform = new Mat33(...json.transfm);
             const targetZIndex = json.targetZIndex;
-            if (!elem) {
-                return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id, targetZIndex);
-            }
-            return new AbstractComponent.TransformElementCommand(transform, elem, targetZIndex);
+            return new AbstractComponent.TransformElementCommand(transform, json.id, elem, targetZIndex);
         });
     })(),
     _a);

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

@@ -0,0 +1,24 @@
+import Color4 from '../Color4';
+import SerializableCommand from '../commands/SerializableCommand';
+import Editor from '../Editor';
+import TextStyle from '../rendering/TextRenderingStyle';
+import AbstractComponent from './AbstractComponent';
+export interface ComponentStyle {
+    color?: Color4;
+    textStyle?: TextStyle;
+}
+export declare const createRestyleComponentCommand: (initialStyle: ComponentStyle, newStyle: ComponentStyle, component: RestyleableComponent) => SerializableCommand;
+export declare const isRestylableComponent: (component: AbstractComponent) => component is RestyleableComponent;
+export interface RestyleableComponent extends AbstractComponent {
+    getStyle(): ComponentStyle;
+    updateStyle(style: ComponentStyle): SerializableCommand;
+    /**
+     * Set the style of this component in a way that can't be undone/redone
+     * (does not create a command).
+     *
+     * Prefer `updateStyle(style).apply(editor)`.
+     */
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
+    isRestylableComponent: true;
+}
+export default RestyleableComponent;

package/dist/src/components/RestylableComponent.js

@@ -0,0 +1,80 @@
+import Color4 from '../Color4';
+import SerializableCommand from '../commands/SerializableCommand';
+import UnresolvedSerializableCommand from '../commands/UnresolvedCommand';
+import { textStyleFromJSON, textStyleToJSON } from '../rendering/TextRenderingStyle';
+const serializeComponentStyle = (style) => {
+    const result = {};
+    if (style.color) {
+        result.color = style.color.toHexString();
+    }
+    if (style.textStyle) {
+        result.textStyle = textStyleToJSON(style.textStyle);
+    }
+    return result;
+};
+const deserializeComponentStyle = (json) => {
+    const color = json.color ? Color4.fromHex(json.color) : undefined;
+    const textStyle = json.textStyle ? textStyleFromJSON(json.textStyle) : undefined;
+    return {
+        color,
+        textStyle,
+    };
+};
+// For internal use by Components implementing `updateStyle`:
+export const createRestyleComponentCommand = (initialStyle, newStyle, component) => {
+    return new DefaultRestyleComponentCommand(initialStyle, newStyle, component.getId(), component);
+};
+// Returns true if `component` is a `RestylableComponent`.
+export const isRestylableComponent = (component) => {
+    const hasMethods = 'getStyle' in component && 'updateStyle' in component && 'forceStyle' in component;
+    if (!hasMethods) {
+        return false;
+    }
+    if (!('isRestylableComponent' in component) || !component['isRestylableComponent']) {
+        return false;
+    }
+    return true;
+};
+const defaultRestyleComponentCommandId = 'default-restyle-element';
+class DefaultRestyleComponentCommand extends UnresolvedSerializableCommand {
+    constructor(originalStyle, newStyle, componentID, component) {
+        super(defaultRestyleComponentCommandId, componentID, component);
+        this.originalStyle = originalStyle;
+        this.newStyle = newStyle;
+    }
+    getComponent(editor) {
+        this.resolveComponent(editor.image);
+        const component = this.component;
+        if (!component || !component['forceStyle'] || !component['updateStyle']) {
+            throw new Error('this.component is missing forceStyle and/or updateStyle methods!');
+        }
+        return component;
+    }
+    apply(editor) {
+        this.getComponent(editor).forceStyle(this.newStyle, editor);
+    }
+    unapply(editor) {
+        this.getComponent(editor).forceStyle(this.originalStyle, editor);
+    }
+    description(_editor, localizationTable) {
+        return localizationTable.restyledElements;
+    }
+    serializeToJSON() {
+        return {
+            id: this.componentID,
+            originalStyle: serializeComponentStyle(this.originalStyle),
+            newStyle: serializeComponentStyle(this.newStyle),
+        };
+    }
+}
+(() => {
+    SerializableCommand.register(defaultRestyleComponentCommandId, (json, _editor) => {
+        const origStyle = deserializeComponentStyle(json.originalStyle);
+        const newStyle = deserializeComponentStyle(json.newStyle);
+        const id = json.id;
+        if (typeof json.id !== 'string') {
+            throw new Error(`json.id is of type ${(typeof json.id)}, not string.`);
+        }
+        return new DefaultRestyleComponentCommand(origStyle, newStyle, id);
+    });
+})();

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

@@ -1,15 +1,22 @@
+import SerializableCommand from '../commands/SerializableCommand';
 import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Path from '../math/Path';
 import Rect2 from '../math/Rect2';
+import Editor from '../Editor';
 import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
-export default class Stroke extends AbstractComponent {
+import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+export default class Stroke extends AbstractComponent implements RestyleableComponent {
     private parts;
     protected contentBBox: Rect2;
+    readonly isRestylableComponent: true;
     private approximateRenderingTime;
     constructor(parts: RenderablePathSpec[]);
+    getStyle(): ComponentStyle;
+    updateStyle(style: ComponentStyle): SerializableCommand;
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
     intersects(line: LineSegment2): boolean;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;

package/dist/src/components/Stroke.js

@@ -2,11 +2,15 @@ import Path from '../math/Path';
 import Rect2 from '../math/Rect2';
 import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
+import { createRestyleComponentCommand } from './RestylableComponent';
 export default class Stroke extends AbstractComponent {
-    // Creates a `Stroke` from the given `parts`.
+    // Creates a `Stroke` from the given `parts`. All parts should have the
+    // same color.
     constructor(parts) {
         var _a;
         super('stroke');
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        this.isRestylableComponent = true;
         this.approximateRenderingTime = 0;
         this.parts = [];
         for (const section of parts) {
@@ -29,6 +33,50 @@ export default class Stroke extends AbstractComponent {
         }
         (_a = this.contentBBox) !== null && _a !== void 0 ? _a : (this.contentBBox = Rect2.empty);
     }
+    getStyle() {
+        if (this.parts.length === 0) {
+            return {};
+        }
+        const firstPart = this.parts[0];
+        if (firstPart.style.stroke === undefined
+            || firstPart.style.stroke.width === 0) {
+            return {
+                color: firstPart.style.fill,
+            };
+        }
+        return {
+            color: firstPart.style.stroke.color,
+        };
+    }
+    updateStyle(style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    }
+    forceStyle(style, editor) {
+        if (!style.color) {
+            return;
+        }
+        this.parts = this.parts.map((part) => {
+            const newStyle = Object.assign(Object.assign({}, part.style), { stroke: part.style.stroke ? Object.assign({}, part.style.stroke) : undefined });
+            // Change the stroke color if a stroked shape. Else,
+            // change the fill.
+            if (newStyle.stroke && newStyle.stroke.width > 0) {
+                newStyle.stroke.color = style.color;
+            }
+            else {
+                newStyle.fill = style.color;
+            }
+            return {
+                path: part.path,
+                startPoint: part.startPoint,
+                commands: part.commands,
+                style: newStyle,
+            };
+        });
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
+    }
     intersects(line) {
         for (const part of this.parts) {
             if (part.path.intersection(line).length > 0) {

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

@@ -1,22 +1,19 @@
+import SerializableCommand from '../commands/SerializableCommand';
 import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
+import Editor from '../Editor';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
-import RenderingStyle from '../rendering/RenderingStyle';
+import { TextStyle } from '../rendering/TextRenderingStyle';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
-export interface TextStyle {
-    size: number;
-    fontFamily: string;
-    fontWeight?: string;
-    fontVariant?: string;
-    renderingStyle: RenderingStyle;
-}
-export default class TextComponent extends AbstractComponent {
+import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+export default class TextComponent extends AbstractComponent implements RestyleableComponent {
     protected readonly textObjects: Array<string | TextComponent>;
     private transform;
     private style;
     protected contentBBox: Rect2;
+    readonly isRestylableComponent: true;
     constructor(textObjects: Array<string | TextComponent>, transform: Mat33, style: TextStyle);
     static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle): void;
     private static textMeasuringCtx;
@@ -28,8 +25,11 @@ export default class TextComponent extends AbstractComponent {
     render(canvas: AbstractRenderer, _visibleRect?: Rect2): void;
     getProportionalRenderingTime(): number;
     intersects(lineSegment: LineSegment2): boolean;
-    getBaselinePos(): import("../lib").Vec3;
+    getStyle(): ComponentStyle;
+    updateStyle(style: ComponentStyle): SerializableCommand;
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
     getTextStyle(): TextStyle;
+    getBaselinePos(): import("../lib").Vec3;
     getTransform(): Mat33;
     protected applyTransformation(affineTransfm: Mat33): void;
     protected createClone(): AbstractComponent;