js-draw 0.14.0 → 0.15.0

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

@@ -7,4 +7,5 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };
+import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageComponent, };

package/dist/src/components/lib.js

@@ -7,4 +7,5 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-export { Stroke, TextComponent as Text, TextComponent as TextComponent, Stroke as StrokeComponent, ImageComponent, };
+import { createRestyleComponentCommand } from './RestylableComponent';
+export { Stroke, TextComponent as Text, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageComponent, };

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

@@ -4,5 +4,6 @@ export interface ImageComponentLocalization {
     imageNode: (description: string) => string;
     stroke: string;
     svgObject: string;
+    restyledElements: string;
 }
 export declare const defaultComponentLocalization: ImageComponentLocalization;

package/dist/src/components/localization.js

@@ -2,6 +2,7 @@ export const defaultComponentLocalization = {
     unlabeledImageNode: 'Unlabeled image node',
     stroke: 'Stroke',
     svgObject: 'SVG Object',
+    restyledElements: 'Restyled elements',
     text: (text) => `Text object: ${text}`,
     imageNode: (description) => `Image: ${description}`,
 };

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

@@ -0,0 +1,23 @@
+import RenderingStyle from './RenderingStyle';
+export interface TextStyle {
+    size: number;
+    fontFamily: string;
+    fontWeight?: string;
+    fontVariant?: string;
+    renderingStyle: RenderingStyle;
+}
+export default TextStyle;
+export declare const textStyleFromJSON: (json: any) => TextStyle;
+export declare const textStyleToJSON: (style: TextStyle) => {
+    renderingStyle: {
+        fill: string;
+        stroke: {
+            color: string;
+            width: number;
+        } | undefined;
+    };
+    size: number;
+    fontFamily: string;
+    fontWeight?: string | undefined;
+    fontVariant?: string | undefined;
+};

package/dist/src/rendering/TextRenderingStyle.js

@@ -0,0 +1,20 @@
+import { styleFromJSON, styleToJSON } from './RenderingStyle';
+export const textStyleFromJSON = (json) => {
+    if (typeof json === 'string') {
+        json = JSON.parse(json);
+    }
+    if (typeof (json.fontFamily) !== 'string') {
+        throw new Error('Serialized textStyle missing string fontFamily attribute!');
+    }
+    const style = {
+        renderingStyle: styleFromJSON(json.renderingStyle),
+        size: json.size,
+        fontWeight: json.fontWeight,
+        fontVariant: json.fontVariant,
+        fontFamily: json.fontFamily,
+    };
+    return style;
+};
+export const textStyleToJSON = (style) => {
+    return Object.assign(Object.assign({}, style), { renderingStyle: styleToJSON(style.renderingStyle) });
+};

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

@@ -1,11 +1,11 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Path, { PathCommand } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 export interface RenderablePathSpec {
     startPoint: Point2;
     commands: PathCommand[];

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

@@ -1,10 +1,10 @@
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export default class CanvasRenderer extends AbstractRenderer {
     private ctx;

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

@@ -1,10 +1,10 @@
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class DummyRenderer extends AbstractRenderer {
     clearedCount: number;

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

@@ -1,10 +1,10 @@
 import { LoadSaveDataTable } from '../../components/AbstractComponent';
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import { Point2, Vec2 } from '../../math/Vec2';
 import Viewport from '../../Viewport';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 export declare const renderedStylesheetId = "js-draw-style-sheet";
 export default class SVGRenderer extends AbstractRenderer {

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

@@ -1,10 +1,10 @@
-import { TextStyle } from '../../components/TextComponent';
 import Mat33 from '../../math/Mat33';
 import Rect2 from '../../math/Rect2';
 import Vec3 from '../../math/Vec3';
 import Viewport from '../../Viewport';
 import { TextRendererLocalization } from '../localization';
 import RenderingStyle from '../RenderingStyle';
+import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage } from './AbstractRenderer';
 export default class TextOnlyRenderer extends AbstractRenderer {
     private localizationTable;

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

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
 import { ComponentBuilderFactory } from '../components/builders/types';
-import { TextStyle } from '../components/TextComponent';
+import TextStyle from '../rendering/TextRenderingStyle';
 import Pen from '../tools/Pen';
 export type IconType = HTMLImageElement | SVGElement;
 /**
@@ -51,6 +51,7 @@ export default class IconProvider {
     makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
     makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory): IconType;
     makePipetteIcon(color?: Color4): IconType;
+    makeFormatSelectionIcon(): IconType;
     makeResizeViewportIcon(): IconType;
     makeDuplicateSelectionIcon(): IconType;
     makePasteIcon(): IconType;

package/dist/src/toolbar/IconProvider.js

@@ -537,6 +537,16 @@ export default class IconProvider {
         icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
     }
+    makeFormatSelectionIcon() {
+        return this.makeIconFromPath(`
+			M 5 10
+			L 5 20 L 10 20 L 10 15 L 20 15 L 20 40 L 15 40 L 15 45 L 35 45 L 35 40 L 30 40 L 30 15 L 40 15 L 40 20 L 45 20 L 45 15 L 45 10 L 5 10 z
+			M 90 10 C 90 10 86.5 13.8 86 14 C 86 14 76.2 24.8 76 25 L 60 25 L 60 65 C 75 70 85 70 90 65 L 90 25 L 80 25 L 76.7 25 L 90 10 z
+			M 60 25 L 55 25 L 50 30 L 60 25 z
+			M 10 55 L 10 90 L 41 90 L 41 86 L 45 86 L 45 55 L 10 55 z
+			M 42 87 L 42 93 L 48 93 L 48 87 L 42 87 z 
+		`);
+    }
     makeResizeViewportIcon() {
         return this.makeIconFromPath(`
 			M 75 5 75 10 90 10 90 25 95 25 95 5 75 5 z

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

@@ -26,6 +26,7 @@ export interface ToolbarLocalization {
     duplicateSelection: string;
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
+    reformatSelection: string;
     undo: string;
     redo: string;
     zoom: string;

package/dist/src/toolbar/localization.js

@@ -5,6 +5,7 @@ export const defaultToolbarLocalization = {
     handTool: 'Pan',
     zoom: 'Zoom',
     image: 'Image',
+    reformatSelection: 'Format selection',
     inputAltText: 'Alt text: ',
     chooseFile: 'Choose file: ',
     submit: 'Submit',

package/dist/src/toolbar/widgets/BaseWidget.js

@@ -88,24 +88,30 @@ export default class BaseWidget {
             }
             // If we didn't do anything with the event, send it to the editor.
             if (!handled) {
-                this.editor.toolController.dispatchInputEvent({
+                handled = this.editor.toolController.dispatchInputEvent({
                     kind: InputEvtType.KeyPressEvent,
                     key: evt.key,
-                    ctrlKey: evt.ctrlKey,
+                    ctrlKey: evt.ctrlKey || evt.metaKey,
                     altKey: evt.altKey,
                 });
             }
+            if (handled) {
+                evt.preventDefault();
+            }
         };
         button.onkeyup = evt => {
             if (evt.key in clickTriggers) {
                 return;
             }
-            this.editor.toolController.dispatchInputEvent({
+            const handled = this.editor.toolController.dispatchInputEvent({
                 kind: InputEvtType.KeyUpEvent,
                 key: evt.key,
-                ctrlKey: evt.ctrlKey,
+                ctrlKey: evt.ctrlKey || evt.metaKey,
                 altKey: evt.altKey,
             });
+            if (handled) {
+                evt.preventDefault();
+            }
         };
         button.onclick = () => {
             if (!this.disabled) {

package/dist/src/toolbar/widgets/InsertImageWidget.js

@@ -10,7 +10,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import ImageComponent from '../../components/ImageComponent';
 import Erase from '../../commands/Erase';
 import EditorImage from '../../EditorImage';
-import { SelectionTool, uniteCommands } from '../../lib';
+import uniteCommands from '../../commands/uniteCommands';
+import SelectionTool from '../../tools/SelectionTool/SelectionTool';
 import Mat33 from '../../math/Mat33';
 import fileToBase64 from '../../util/fileToBase64';
 import ActionButtonWidget from './ActionButtonWidget';

package/dist/src/toolbar/widgets/SelectionToolWidget.js

@@ -7,9 +7,82 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
+import Color4 from '../../Color4';
+import { isRestylableComponent } from '../../components/RestylableComponent';
+import uniteCommands from '../../commands/uniteCommands';
 import { EditorEventType } from '../../types';
+import makeColorInput from '../makeColorInput';
 import ActionButtonWidget from './ActionButtonWidget';
 import BaseToolWidget from './BaseToolWidget';
+import BaseWidget from './BaseWidget';
+class RestyleSelectionWidget extends BaseWidget {
+    constructor(editor, selectionTool, localizationTable) {
+        super(editor, 'restyle-selection', localizationTable);
+        this.selectionTool = selectionTool;
+        this.updateFormatData = () => { };
+        // Allow showing the dropdown even if this widget isn't selected yet
+        this.container.classList.add('dropdownShowable');
+        this.editor.notifier.on(EditorEventType.ToolUpdated, toolEvt => {
+            if (toolEvt.kind !== EditorEventType.ToolUpdated) {
+                throw new Error('Invalid event type!');
+            }
+            if (toolEvt.tool === this.selectionTool) {
+                this.updateFormatData();
+            }
+        });
+    }
+    getTitle() {
+        return this.localizationTable.reformatSelection;
+    }
+    createIcon() {
+        return this.editor.icons.makeFormatSelectionIcon();
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        const colorRow = document.createElement('div');
+        const colorLabel = document.createElement('label');
+        const [colorInput, colorInputContainer, setColorInputValue] = makeColorInput(this.editor, color => {
+            const selection = this.selectionTool.getSelection();
+            if (selection) {
+                const updateStyleCommands = [];
+                for (const elem of selection.getSelectedObjects()) {
+                    if (isRestylableComponent(elem)) {
+                        updateStyleCommands.push(elem.updateStyle({ color }));
+                    }
+                }
+                const unitedCommand = uniteCommands(updateStyleCommands);
+                this.editor.dispatch(unitedCommand);
+            }
+        });
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        this.updateFormatData = () => {
+            const selection = this.selectionTool.getSelection();
+            if (selection) {
+                colorInput.disabled = false;
+                const colors = [];
+                for (const elem of selection.getSelectedObjects()) {
+                    if (isRestylableComponent(elem)) {
+                        const color = elem.getStyle().color;
+                        if (color) {
+                            colors.push(color);
+                        }
+                    }
+                }
+                setColorInputValue(Color4.average(colors));
+            }
+            else {
+                colorInput.disabled = true;
+            }
+        };
+        colorRow.replaceChildren(colorLabel, colorInputContainer);
+        container.replaceChildren(colorRow);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+}
 export default class SelectionToolWidget extends BaseToolWidget {
     constructor(editor, tool, localization) {
         super(editor, tool, 'selection-tool-widget', localization);
@@ -26,13 +99,16 @@ export default class SelectionToolWidget extends BaseToolWidget {
             const selection = this.tool.getSelection();
             this.editor.dispatch(yield selection.duplicateSelectedObjects());
         }), localization);
+        const restyleButton = new RestyleSelectionWidget(editor, this.tool, localization);
         this.addSubWidget(resizeButton);
         this.addSubWidget(deleteButton);
         this.addSubWidget(duplicateButton);
+        this.addSubWidget(restyleButton);
         const updateDisabled = (disabled) => {
             resizeButton.setDisabled(disabled);
             deleteButton.setDisabled(disabled);
             duplicateButton.setDisabled(disabled);
+            restyleButton.setDisabled(disabled);
         };
         updateDisabled(true);
         // Enable/disable actions based on whether items are selected
@@ -42,7 +118,7 @@ export default class SelectionToolWidget extends BaseToolWidget {
             }
             if (toolEvt.tool === this.tool) {
                 const selection = this.tool.getSelection();
-                const hasSelection = selection && selection.region.area > 0;
+                const hasSelection = selection && selection.getSelectedItemCount() > 0;
                 updateDisabled(!hasSelection);
             }
         });

package/dist/src/tools/Pen.js

@@ -152,7 +152,7 @@ export default class Pen extends BaseTool {
             this.setThickness(newThickness);
             return true;
         }
-        if (key === 'control') {
+        if (key === 'control' || key === 'meta') {
             this.ctrlKeyPressed = true;
             return true;
         }
@@ -164,7 +164,7 @@ export default class Pen extends BaseTool {
     }
     onKeyUp({ key }) {
         key = key.toLowerCase();
-        if (key === 'control') {
+        if (key === 'control' || key === 'meta') {
             this.ctrlKeyPressed = false;
             return true;
         }

package/dist/src/tools/SelectionTool/SelectAllShortcutHandler.d.ts

@@ -0,0 +1,8 @@
+import Editor from '../../Editor';
+import { KeyPressEvent } from '../../types';
+import BaseTool from '../BaseTool';
+export default class SelectAllShortcutHandler extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onKeyPress({ key, ctrlKey }: KeyPressEvent): boolean;
+}

package/dist/src/tools/SelectionTool/SelectAllShortcutHandler.js

@@ -0,0 +1,22 @@
+import BaseTool from '../BaseTool';
+import SelectionTool from './SelectionTool';
+// Handles ctrl+a: Select all
+export default class SelectAllShortcutHandler extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.selectAllTool);
+        this.editor = editor;
+    }
+    // @internal
+    onKeyPress({ key, ctrlKey }) {
+        if (ctrlKey && key === 'a') {
+            const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+            if (selectionTools.length > 0) {
+                const selectionTool = selectionTools[0];
+                selectionTool.setEnabled(true);
+                selectionTool.setSelection(this.editor.image.getAllElements());
+                return true;
+            }
+        }
+        return false;
+    }
+}

package/dist/src/tools/SelectionTool/Selection.js

@@ -440,7 +440,7 @@ Selection.ApplyTransformationCommand = class extends SerializableCommand {
             this.resolveToElems(editor);
             (_b = this.selection) === null || _b === void 0 ? void 0 : _b.setTransform(this.fullTransform.inverse(), false);
             (_c = this.selection) === null || _c === void 0 ? void 0 : _c.updateUI();
-            yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize);
+            yield editor.asyncUnapplyCommands(this.transformCommands, updateChunkSize, true);
             (_d = this.selection) === null || _d === void 0 ? void 0 : _d.setTransform(Mat33.identity);
             (_e = this.selection) === null || _e === void 0 ? void 0 : _e.recomputeRegion();
             (_f = this.selection) === null || _f === void 0 ? void 0 : _f.updateUI();

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -171,7 +171,7 @@ export default class SelectionTool extends BaseTool {
         this.expandingSelectionBox = false;
     }
     onKeyPress(event) {
-        if (event.key === 'Control') {
+        if (event.key === 'Control' || event.key === 'Meta') {
             this.ctrlKeyPressed = true;
             return true;
         }
@@ -181,8 +181,7 @@ export default class SelectionTool extends BaseTool {
             return true;
         }
         else if (event.key === 'a' && event.ctrlKey) {
-            // Handle ctrl+A on key up.
-            // Return early to prevent 'a' from moving the selection/view.
+            this.setSelection(this.editor.image.getAllElements());
             return true;
         }
         else if (event.ctrlKey) {
@@ -268,7 +267,7 @@ export default class SelectionTool extends BaseTool {
         return handled;
     }
     onKeyUp(evt) {
-        if (evt.key === 'Control') {
+        if (evt.key === 'Control' || evt.key === 'Meta') {
             this.ctrlKeyPressed = false;
             return true;
         }
@@ -283,10 +282,6 @@ export default class SelectionTool extends BaseTool {
                 });
                 return true;
             }
-            else if (evt.key === 'a') {
-                this.setSelection(this.editor.image.getAllElements());
-                return true;
-            }
         }
         if (this.selectionBox && SelectionTool.handleableKeys.some(key => key === evt.key)) {
             this.selectionBox.finalizeTransform();
@@ -394,5 +389,5 @@ SelectionTool.handleableKeys = [
     'e', 'j', 'ArrowDown',
     'r', 'R',
     'i', 'I', 'o', 'O',
-    'Control',
+    'Control', 'Meta',
 ];

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

@@ -1,9 +1,9 @@
 import Color4 from '../Color4';
-import { TextStyle } from '../components/TextComponent';
 import Editor from '../Editor';
 import { PointerEvt } from '../types';
 import BaseTool from './BaseTool';
 import { ToolLocalization } from './localization';
+import TextStyle from '../rendering/TextRenderingStyle';
 export default class TextTool extends BaseTool {
     private editor;
     private localizationTable;

package/dist/src/tools/ToolController.js

@@ -13,6 +13,7 @@ import PasteHandler from './PasteHandler';
 import ToolbarShortcutHandler from './ToolbarShortcutHandler';
 import { makePressureSensitiveFreehandLineBuilder } from '../components/builders/PressureSensitiveFreehandLineBuilder';
 import FindTool from './FindTool';
+import SelectAllShortcutHandler from './SelectionTool/SelectAllShortcutHandler';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -43,6 +44,7 @@ export default class ToolController {
             new ToolSwitcherShortcut(editor),
             new FindTool(editor),
             new PasteHandler(editor),
+            new SelectAllShortcutHandler(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);

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

@@ -10,6 +10,7 @@ export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
+export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
 export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

package/dist/src/tools/lib.js

@@ -10,6 +10,7 @@ export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool } from './Pen';
 export { default as TextTool } from './TextTool';
 export { default as SelectionTool } from './SelectionTool/SelectionTool';
+export { default as SelectAllShortcutHandler } from './SelectionTool/SelectAllShortcutHandler';
 export { default as EraserTool } from './Eraser';
 export { default as PasteHandler } from './PasteHandler';
 export { default as ToolbarShortcutHandler } from './ToolbarShortcutHandler';

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

@@ -2,6 +2,7 @@ export interface ToolLocalization {
     keyboardPanZoom: string;
     penTool: (penId: number) => string;
     selectionTool: string;
+    selectAllTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;

package/dist/src/tools/localization.js

@@ -1,6 +1,7 @@
 export const defaultToolLocalization = {
     penTool: (penId) => `Pen ${penId}`,
     selectionTool: 'Selection',
+    selectAllTool: 'Select all shortcut',
     eraserTool: 'Eraser',
     touchPanTool: 'Touch panning',
     twoFingerPanZoomTool: 'Panning and zooming',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.14.0",
+	"version": "0.15.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Color4.test.ts

@@ -27,4 +27,8 @@ describe('Color4', () => {
 			Color4.ofRGB(0.7, 0.3, 0)
 		);
 	});
+
+	it('should mix red with nothing and get red', () => {
+		expect(Color4.average([ Color4.red ])).objEq(Color4.red);
+	});
 });

package/src/Color4.ts

@@ -151,6 +151,32 @@ export default class Color4 {
 		);
 	}
 
+	/**
+	 * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
+	 */
+	public static average(colors: Color4[]) {
+		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);
+	}
+
 	private hexString: string|null = null;
 
 	/**

package/src/Editor.toSVG.test.ts

@@ -1,5 +1,5 @@
-import { TextStyle } from './components/TextComponent';
 import { Color4, Mat33, Rect2, TextComponent, EditorImage, Vec2 } from './lib';
+import TextStyle from './rendering/TextRenderingStyle';
 import SVGLoader from './SVGLoader';
 import createEditor from './testing/createEditor';
 

package/src/Editor.ts

@@ -704,8 +704,14 @@ export class Editor {
 		return this.asyncApplyOrUnapplyCommands(commands, true, chunkSize);
 	}
 
+	// If `unapplyInReverseOrder`, commands are reversed before unapplying.
 	// @see {@link #asyncApplyOrUnapplyCommands }
-	public asyncUnapplyCommands(commands: Command[], chunkSize: number) {
+	public asyncUnapplyCommands(commands: Command[], chunkSize: number, unapplyInReverseOrder: boolean = false) {
+		if (unapplyInReverseOrder) {
+			commands = [ ...commands ]; // copy
+			commands.reverse();
+		}
+
 		return this.asyncApplyOrUnapplyCommands(commands, false, chunkSize);
 	}
 
@@ -745,6 +751,11 @@ export class Editor {
 		});
 	}
 
+	// @internal
+	public isRerenderQueued() {
+		return this.rerenderQueued;
+	}
+
 	public rerender(showImageBounds: boolean = true) {
 		this.display.startRerender();
 

package/src/EditorImage.ts

@@ -34,6 +34,19 @@ 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.
+	public queueRerenderOf(elem: AbstractComponent) {
+		// 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 */
 	public renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport) {
 		cache.render(screenRenderer, this.root, viewport);