js-draw 0.1.4 → 0.1.7

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

@@ -8,7 +8,9 @@ export declare enum ToolType {
     Eraser = 2,
     PanZoom = 3,
     Text = 4,
-    UndoRedoShortcut = 5
+    UndoRedoShortcut = 5,
+    Pipette = 6,
+    Other = 7
 }
 export default class ToolController {
     private tools;

package/dist/src/tools/ToolController.js

@@ -7,6 +7,7 @@ import SelectionTool from './SelectionTool';
 import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
+import PipetteTool from './PipetteTool';
 export var ToolType;
 (function (ToolType) {
     ToolType[ToolType["Pen"] = 0] = "Pen";
@@ -15,6 +16,8 @@ export var ToolType;
     ToolType[ToolType["PanZoom"] = 3] = "PanZoom";
     ToolType[ToolType["Text"] = 4] = "Text";
     ToolType[ToolType["UndoRedoShortcut"] = 5] = "UndoRedoShortcut";
+    ToolType[ToolType["Pipette"] = 6] = "Pipette";
+    ToolType[ToolType["Other"] = 7] = "Other";
 })(ToolType || (ToolType = {}));
 export default class ToolController {
     constructor(editor, localization) {
@@ -32,6 +35,7 @@ export default class ToolController {
             new TextTool(editor, localization.textTool, localization),
         ];
         this.tools = [
+            new PipetteTool(editor, localization.pipetteTool),
             panZoomTool,
             ...primaryTools,
             new UndoRedoShortcut(editor),

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

@@ -1,11 +1,12 @@
 export interface ToolLocalization {
-    rightClickDragPanTool: string;
     penTool: (penId: number) => string;
     selectionTool: string;
     eraserTool: string;
     touchPanTool: string;
     twoFingerPanZoomTool: string;
     undoRedoTool: string;
+    pipetteTool: string;
+    rightClickDragPanTool: string;
     textTool: string;
     enterTextToInsert: string;
     toolEnabledAnnouncement: (toolName: string) => string;

package/dist/src/tools/localization.js

@@ -2,10 +2,11 @@ export const defaultToolLocalization = {
     penTool: (penId) => `Pen ${penId}`,
     selectionTool: 'Selection',
     eraserTool: 'Eraser',
-    touchPanTool: 'Touch Panning',
-    twoFingerPanZoomTool: 'Panning and Zooming',
+    touchPanTool: 'Touch panning',
+    twoFingerPanZoomTool: 'Panning and zooming',
     undoRedoTool: 'Undo/Redo',
     rightClickDragPanTool: 'Right-click drag',
+    pipetteTool: 'Pick color from screen',
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,

package/dist/src/types.d.ts

@@ -58,7 +58,8 @@ export declare enum EditorEventType {
     ObjectAdded = 4,
     ViewportChanged = 5,
     DisplayResized = 6,
-    ColorPickerToggled = 7
+    ColorPickerToggled = 7,
+    ColorPickerColorSelected = 8
 }
 declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
@@ -86,7 +87,11 @@ export interface ColorPickerToggled {
     readonly kind: EditorEventType.ColorPickerToggled;
     readonly open: boolean;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled;
+export interface ColorPickerColorSelected {
+    readonly kind: EditorEventType.ColorPickerColorSelected;
+    readonly color: Color4;
+}
+export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | ColorPickerToggled | ColorPickerColorSelected;
 export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
 export declare type ComponentAddedListener = (component: AbstractComponent) => void;
 export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;

package/dist/src/types.js

@@ -18,4 +18,5 @@ export var EditorEventType;
     EditorEventType[EditorEventType["ViewportChanged"] = 5] = "ViewportChanged";
     EditorEventType[EditorEventType["DisplayResized"] = 6] = "DisplayResized";
     EditorEventType[EditorEventType["ColorPickerToggled"] = 7] = "ColorPickerToggled";
+    EditorEventType[EditorEventType["ColorPickerColorSelected"] = 8] = "ColorPickerColorSelected";
 })(EditorEventType || (EditorEventType = {}));

package/jest.config.js

@@ -17,6 +17,8 @@ const config = {
 		'\\.(css|lessc)': '<rootDir>/__mocks__/styleMock.js',
 		'@melloware/coloris': '<rootDir>/__mocks__/coloris.ts',
 	},
+	
+	testEnvironment: 'jsdom',
 };
 
 module.exports = config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.1.4",
+  "version": "0.1.7",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "main": "dist/src/Editor.js",
   "types": "dist/src/Editor.d.ts",
@@ -59,14 +59,14 @@
     "@types/bezier-js": "^4.1.0",
     "@types/jest": "^28.1.7",
     "@types/jsdom": "^20.0.0",
-    "@types/node": "^18.7.9",
-    "@typescript-eslint/eslint-plugin": "^5.33.1",
-    "@typescript-eslint/parser": "^5.33.1",
+    "@types/node": "^18.7.15",
+    "@typescript-eslint/eslint-plugin": "^5.36.2",
+    "@typescript-eslint/parser": "^5.36.2",
     "css-loader": "^6.7.1",
-    "eslint": "^8.22.0",
+    "eslint": "^8.23.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest-environment-jsdom": "^29.0.2",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",
     "pinst": "^3.0.0",

package/src/Color4.ts

@@ -5,14 +5,20 @@ export default class Color4 {
 		public readonly g: number,
 		public readonly b: number,
 		public readonly a: number
-	) { }
+	) {
+	}
 
 	// Each component should be in the range [0, 1]
 	public static ofRGB(red: number, green: number, blue: number): Color4 {
-		return new Color4(red, green, blue, 1.0);
+		return Color4.ofRGBA(red, green, blue, 1.0);
 	}
 
 	public static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4 {
+		red = Math.max(0, Math.min(red, 1));
+		green = Math.max(0, Math.min(green, 1));
+		blue = Math.max(0, Math.min(blue, 1));
+		alpha = Math.max(0, Math.min(alpha, 1));
+
 		return new Color4(red, green, blue, alpha);
 	}
 
@@ -49,7 +55,7 @@ export default class Color4 {
 			throw new Error(`Unable to parse ${hexString}: Wrong number of components.`);
 		}
 
-		return new Color4(components[0], components[1], components[2], components[3]);
+		return Color4.ofRGBA(components[0], components[1], components[2], components[3]);
 	}
 
 	// Like fromHex, but can handle additional colors if an HTML5Canvas is available.

package/src/Editor.css

@@ -68,3 +68,13 @@
 	overflow: hidden;
 	pointer-events: none;
 }
+
+.imageEditorContainer .textRendererOutputContainer {
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+}
+
+.imageEditorContainer .textRendererOutputContainer:focus-within {
+	overflow: visible;
+}

package/src/Editor.ts

@@ -108,7 +108,7 @@ export class Editor {
 		);
 
 		this.registerListeners();
-		this.rerender();
+		this.queueRerender();
 		this.hideLoadingWarning();
 	}
 
@@ -277,7 +277,7 @@ export class Editor {
 				delta = Vec3.of(0, 0, evt.deltaY);
 			}
 
-			const pos = Vec2.of(evt.clientX, evt.clientY);
+			const pos = Vec2.of(evt.offsetX, evt.offsetY);
 			if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.WheelEvt,
 				delta,
@@ -307,6 +307,7 @@ export class Editor {
 		});
 	}
 
+	// Adds to history by default
 	public dispatch(command: Command, addToHistory: boolean = true) {
 		if (addToHistory) {
 			// .push applies [command] to this
@@ -318,6 +319,15 @@ export class Editor {
 		this.announceForAccessibility(command.description(this.localization));
 	}
 
+	// Dispatches a command without announcing it. By default, does not add to history.
+	public dispatchNoAnnounce(command: Command, addToHistory: boolean = false) {
+		if (addToHistory) {
+			this.history.push(command);
+		} else {
+			command.apply(this);
+		}
+	}
+
 	// Apply a large transformation in chunks.
 	// If [apply] is false, the commands are unapplied.
 	// Triggers a re-render after each [updateChunkSize]-sized group of commands
@@ -486,7 +496,7 @@ export class Editor {
 		this.display.setDraftMode(true);
 
 		await loader.start((component) => {
-			(new EditorImage.AddElementCommand(component)).apply(this);
+			this.dispatchNoAnnounce(EditorImage.addElement(component));
 		}, (countProcessed: number, totalToProcess: number) => {
 			if (countProcessed % 500 === 0) {
 				this.showLoadingWarning(countProcessed / totalToProcess);
@@ -498,8 +508,8 @@ export class Editor {
 
 			return null;
 		}, (importExportRect: Rect2) => {
-			this.setImportExportRect(importExportRect).apply(this);
-			this.viewport.zoomTo(importExportRect).apply(this);
+			this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
+			this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
 		});
 		this.hideLoadingWarning();
 
@@ -517,22 +527,24 @@ export class Editor {
 		const origSize = this.importExportViewport.visibleRect.size;
 		const origTransform = this.importExportViewport.canvasToScreenTransform;
 
-		return {
-			apply(editor) {
+		return new class extends Command {
+			public apply(editor: Editor) {
 				const viewport = editor.importExportViewport;
 				viewport.updateScreenSize(imageRect.size);
 				viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
 				editor.queueRerender();
-			},
-			unapply(editor) {
+			}
+
+			public unapply(editor: Editor) {
 				const viewport = editor.importExportViewport;
 				viewport.updateScreenSize(origSize);
 				viewport.resetTransform(origTransform);
 				editor.queueRerender();
-			},
-			description(localizationTable) {
+			}
+
+			public description(localizationTable: EditorLocalization) {
 				return localizationTable.resizeOutputCommand(imageRect);
-			},
+			}
 		};
 	}
 

package/src/EditorImage.test.ts

@@ -6,8 +6,8 @@ import { Vec2 } from './geometry/Vec2';
 import Path, { PathCommandType } from './geometry/Path';
 import Color4 from './Color4';
 import DummyRenderer from './rendering/renderers/DummyRenderer';
-import { RenderingStyle } from './rendering/renderers/AbstractRenderer';
 import createEditor from './testing/createEditor';
+import RenderingStyle from './rendering/RenderingStyle';
 
 describe('EditorImage', () => {
 	const testStroke = new Stroke([
@@ -25,7 +25,7 @@ describe('EditorImage', () => {
 		},
 	]);
 	const testFill: RenderingStyle = { fill: Color4.black };
-	const addTestStrokeCommand = new EditorImage.AddElementCommand(testStroke);
+	const addTestStrokeCommand = EditorImage.addElement(testStroke);
 
 	it('elements added to the image should be findable', () => {
 		const editor = createEditor();
@@ -69,7 +69,7 @@ describe('EditorImage', () => {
 
 		expect(!leftmostStroke.getBBox().intersects(rightmostStroke.getBBox()));
 
-		(new EditorImage.AddElementCommand(leftmostStroke)).apply(editor);
+		(EditorImage.addElement(leftmostStroke)).apply(editor);
 
 		// The first node should be at the image's root.
 		let firstParent = image.findParent(leftmostStroke);
@@ -77,7 +77,7 @@ describe('EditorImage', () => {
 		expect(firstParent?.getParent()).toBe(null);
 		expect(firstParent?.getBBox()?.corners).toMatchObject(leftmostStroke.getBBox()?.corners);
 
-		(new EditorImage.AddElementCommand(rightmostStroke)).apply(editor);
+		(EditorImage.addElement(rightmostStroke)).apply(editor);
 
 		firstParent = image.findParent(leftmostStroke);
 		const secondParent = image.findParent(rightmostStroke);

package/src/EditorImage.ts

@@ -6,6 +6,7 @@ import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
 import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
+import SerializableCommand from './commands/SerializableCommand';
 
 export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
 	leaves.sort((a, b) => a.getContent()!.getZIndex() - b.getContent()!.getZIndex());
@@ -14,13 +15,11 @@ export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
 	private root: ImageNode;
+	private componentsById: Record<string, AbstractComponent>;
 
 	public constructor() {
 		this.root = new ImageNode();
-	}
-
-	private addElement(elem: AbstractComponent): ImageNode {
-		return this.root.addLeaf(elem);
+		this.componentsById = {};
 	}
 
 	// Returns the parent of the given element, if it exists.
@@ -59,50 +58,76 @@ export default class EditorImage {
 		return leaves.map(leaf => leaf.getContent()!);
 	}
 
-	// A Command that can access private [EditorImage] functionality
-	public static AddElementCommand = class implements Command {
-		readonly #element: AbstractComponent;
-		#applyByFlattening: boolean = false;
+	public onDestroyElement(elem: AbstractComponent) {
+		delete this.componentsById[elem.getId()];
+	}
+
+	public lookupElement(id: string): AbstractComponent|null {
+		return this.componentsById[id] ?? null;
+	}
 
+	private addElementDirectly(elem: AbstractComponent): ImageNode {
+		this.componentsById[elem.getId()] = elem;
+		return this.root.addLeaf(elem);
+	}
+
+	public static addElement(elem: AbstractComponent, applyByFlattening: boolean = false): Command {
+		return new EditorImage.AddElementCommand(elem, applyByFlattening);
+	}
+
+	// A Command that can access private [EditorImage] functionality
+	private static AddElementCommand = class extends SerializableCommand {
 		// If [applyByFlattening], then the rendered content of this element
 		// is present on the display's wet ink canvas. As such, no re-render is necessary
 		// the first time this command is applied (the surfaces are joined instead).
 		public constructor(
-			element: AbstractComponent,
-			applyByFlattening: boolean = false
+			private element: AbstractComponent,
+			private applyByFlattening: boolean = false
 		) {
-			this.#element = element;
-			this.#applyByFlattening = applyByFlattening;
+			super('add-element');
 
-			if (isNaN(this.#element.getBBox().area)) {
+			if (isNaN(element.getBBox().area)) {
 				throw new Error('Elements in the image cannot have NaN bounding boxes');
 			}
 		}
 
 		public apply(editor: Editor) {
-			editor.image.addElement(this.#element);
+			editor.image.addElementDirectly(this.element);
 
-			if (!this.#applyByFlattening) {
+			if (!this.applyByFlattening) {
 				editor.queueRerender();
 			} else {
-				this.#applyByFlattening = false;
+				this.applyByFlattening = false;
 				editor.display.flatten();
 			}
 		}
 
 		public unapply(editor: Editor) {
-			const container = editor.image.findParent(this.#element);
+			const container = editor.image.findParent(this.element);
 			container?.remove();
 			editor.queueRerender();
 		}
 
 		public description(localization: EditorLocalization) {
-			return localization.addElementAction(this.#element.description(localization));
+			return localization.addElementAction(this.element.description(localization));
+		}
+
+		protected serializeToString() {
+			return JSON.stringify({
+				elemData: this.element.serialize(),
+			});
+		}
+
+		static {
+			SerializableCommand.register('add-element', (data: string, _editor: Editor) => {
+				const json = JSON.parse(data);
+				const elem = AbstractComponent.deserialize(json.elemData);
+				return new EditorImage.AddElementCommand(elem);
+			});
 		}
 	};
 }
 
-export type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
 type TooSmallToRenderCheck = (rect: Rect2)=> boolean;
 
 // TODO: Assign leaf nodes to CacheNodes. When leaf nodes are modified, the corresponding CacheNodes can be updated.
@@ -221,6 +246,7 @@ export class ImageNode {
 			nodeForChildren.children = this.children;
 			this.children = [nodeForNewLeaf, nodeForChildren];
 			nodeForChildren.recomputeBBox(true);
+			nodeForChildren.updateParents();
 
 			return nodeForNewLeaf.addLeaf(leaf);
 		}
@@ -279,6 +305,16 @@ export class ImageNode {
 		}
 	}
 
+	private updateParents(recursive: boolean = false) {
+		for (const child of this.children) {
+			child.parent = this;
+
+			if (recursive) {
+				child.updateParents(recursive);
+			}
+		}
+	}
+
 	private rebalance() {
 		// If the current node is its parent's only child,
 		if (this.parent && this.parent.children.length === 1) {
@@ -296,6 +332,7 @@ export class ImageNode {
 			} else if (this.content === null) {
 				// Remove this and transfer this' children to the parent.
 				this.parent.children = this.children;
+				this.parent.updateParents();
 				this.parent = null;
 			}
 		}
@@ -314,7 +351,11 @@ export class ImageNode {
 		this.parent.children = this.parent.children.filter(node => {
 			return node !== this;
 		});
-		console.assert(this.parent.children.length === oldChildCount - 1);
+
+		console.assert(
+			this.parent.children.length === oldChildCount - 1,
+			`${oldChildCount - 1} ≠ ${this.parent.children.length} after removing all nodes equal to ${this}. Nodes should only be removed once.`
+		);
 
 		this.parent.children.forEach(child => {
 			child.rebalance();

package/src/SVGLoader.ts

@@ -8,7 +8,8 @@ import Mat33 from './geometry/Mat33';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
 import { Vec2 } from './geometry/Vec2';
-import { RenderablePathSpec, RenderingStyle } from './rendering/renderers/AbstractRenderer';
+import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
+import RenderingStyle from './rendering/RenderingStyle';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
 type OnFinishListener = ()=> void;
@@ -198,14 +199,19 @@ export default class SVGLoader implements ImageLoader {
 		}
 		const style: TextStyle = {
 			size: fontSize,
-			fontFamily: computedStyles.fontFamily || 'sans-serif',
+			fontFamily: computedStyles.fontFamily || elem.style.fontFamily || 'sans-serif',
 			renderingStyle: {
 				fill: Color4.fromString(computedStyles.fill)
 			},
 		};
 
+		let transformProperty = computedStyles.transform;
+		if (transformProperty === '' || transformProperty === 'none') {
+			transformProperty = elem.style.transform || 'none';
+		}
+
 		// Compute transform matrix
-		let transform = Mat33.fromCSSMatrix(computedStyles.transform);
+		let transform = Mat33.fromCSSMatrix(transformProperty);
 		const supportedAttrs = [];
 		const elemX = elem.getAttribute('x');
 		const elemY = elem.getAttribute('y');

package/src/Viewport.ts

@@ -13,10 +13,11 @@ type PointDataType<T extends Point2|StrokeDataPoint|number> = T extends Point2 ?
 
 export class Viewport {
 	// Command that translates/scales the viewport.
-	public static ViewportTransform = class implements Command {
+	public static ViewportTransform = class extends Command {
 		readonly #inverseTransform: Mat33;
 
 		public constructor(public readonly transform: Mat33) {
+			super();
 			this.#inverseTransform = transform.inverse();
 		}
 
@@ -101,7 +102,7 @@ export class Viewport {
 
 	// Updates the transformation directly. Using ViewportTransform is preferred.
 	// [newTransform] should map from canvas coordinates to screen coordinates.
-	public resetTransform(newTransform: Mat33) {
+	public resetTransform(newTransform: Mat33 = Mat33.identity) {
 		this.transform = newTransform;
 		this.inverseTransform = newTransform.inverse();
 		this.notifier.dispatch(EditorEventType.ViewportChanged, {
@@ -181,19 +182,19 @@ export class Viewport {
 			throw new Error(`${toMakeVisible.toString()} rectangle has NaN size! Cannot zoom to!`);
 		}
 
-		// Try to move the selection within the center 2/3rds of the viewport.
+		// Try to move the selection within the center 4/5ths of the viewport.
 		const recomputeTargetRect = () => {
 			// transform transforms objects on the canvas. As such, we need to invert it
 			// to transform the viewport.
 			const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
-			return visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
+			return visibleRect.transformedBoundingBox(Mat33.scaling2D(4/5, visibleRect.center));
 		};
 
 		let targetRect = recomputeTargetRect();
 		const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
 
-		// Ensure that toMakeVisible is at least 1/8th of the visible region.
-		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
+		// Ensure that toMakeVisible is at least 1/3rd of the visible region.
+		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 1/3;
 
 		if ((largerThanTarget && allowZoomOut) || (muchSmallerThanTarget && allowZoomIn)) {
 			// If larger than the target, ensure that the longest axis is visible.

package/src/commands/Command.ts

@@ -1,32 +1,28 @@
 import Editor from '../Editor';
 import { EditorLocalization } from '../localization';
 
-interface Command {
-	apply(editor: Editor): void;
-	unapply(editor: Editor): void;
+export abstract class Command {
+	public abstract apply(editor: Editor): void;
+	public abstract unapply(editor: Editor): void;
 
-	description(localizationTable: EditorLocalization): string;
-}
+	// Called when the command is being deleted
+	public onDrop(_editor: Editor) { }
 
-// eslint-disable-next-line no-redeclare
-namespace Command {
-	export const empty = {
-		apply(_editor: Editor) { },
-		unapply(_editor: Editor) { },
-	};
+	public abstract description(localizationTable: EditorLocalization): string;
 
-	export const union = (a: Command, b: Command): Command => {
-		return {
-			apply(editor: Editor) {
+	public static union(a: Command, b: Command): Command {
+		return new class extends Command {
+			public apply(editor: Editor) {
 				a.apply(editor);
 				b.apply(editor);
-			},
-			unapply(editor: Editor) {
+			}
+
+			public unapply(editor: Editor) {
 				b.unapply(editor);
 				a.unapply(editor);
-			},
+			}
 
-			description(localizationTable: EditorLocalization) {
+			public description(localizationTable: EditorLocalization) {
 				const aDescription = a.description(localizationTable);
 				const bDescription = b.description(localizationTable);
 
@@ -35,8 +31,14 @@ namespace Command {
 				}
 
 				return `${aDescription}, ${bDescription}`;
-			},
+			}
 		};
+	}
+
+	public static readonly empty = new class extends Command {
+		public description(_localizationTable: EditorLocalization) { return ''; }
+		public apply(_editor: Editor) { }
+		public unapply(_editor: Editor) { }
 	};
 }
 

package/src/commands/Duplicate.ts

@@ -0,0 +1,49 @@
+import AbstractComponent from '../components/AbstractComponent';
+import describeComponentList from '../components/util/describeComponentList';
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+import Erase from './Erase';
+import SerializableCommand from './SerializableCommand';
+
+export default class Duplicate extends SerializableCommand {
+	private duplicates: AbstractComponent[];
+	private reverse: Erase;
+
+	public constructor(private toDuplicate: AbstractComponent[]) {
+		super('duplicate');
+
+		this.duplicates = toDuplicate.map(elem => elem.clone());
+		this.reverse = new Erase(this.duplicates);
+	}
+
+	public apply(editor: Editor): void {
+		this.reverse.unapply(editor);
+	}
+
+	public unapply(editor: Editor): void {
+		this.reverse.apply(editor);
+	}
+
+	public description(localizationTable: EditorLocalization): string {
+		if (this.duplicates.length === 0) {
+			return localizationTable.duplicatedNoElements;
+		}
+
+		return localizationTable.duplicateAction(
+			describeComponentList(localizationTable, this.duplicates) ?? localizationTable.elements,
+			this.duplicates.length
+		);
+	}
+
+	protected serializeToString(): string {
+		return JSON.stringify(this.toDuplicate.map(elem => elem.getId()));
+	}
+
+	static {
+		SerializableCommand.register('duplicate', (data: string, editor: Editor) => {
+			const json = JSON.parse(data);
+			const elems = json.map((id: string) => editor.image.lookupElement(id));
+			return new Duplicate(elems);
+		});
+	}
+}