js-draw 0.0.4 → 0.0.7

package/dist/src/components/SVGGlobalAttributesObject.js

@@ -0,0 +1,29 @@
+import Rect2 from '../geometry/Rect2';
+import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractComponent from './AbstractComponent';
+// Stores global SVG attributes (e.g. namespace identifiers.)
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+    constructor(attrs) {
+        super();
+        this.attrs = attrs;
+        this.contentBBox = Rect2.empty;
+    }
+    render(canvas, _visibleRect) {
+        if (!(canvas instanceof SVGRenderer)) {
+            // Don't draw unrenderable objects if we can't
+            return;
+        }
+        console.log('Rendering to SVG.', this.attrs);
+        for (const [attr, value] of this.attrs) {
+            canvas.setRootSVGAttribute(attr, value);
+        }
+    }
+    intersects(_lineSegment) {
+        return false;
+    }
+    applyTransformation(_affineTransfm) {
+    }
+    description(localization) {
+        return localization.svgObject;
+    }
+}

package/dist/src/components/builders/FreehandLineBuilder.js

@@ -148,9 +148,21 @@ export default class FreehandLineBuilder {
                 projectionT = 0.9;
             }
         }
-        const halfVec = Vec2.ofXY(this.currentCurve.normal(projectionT))
-            .normalized().times(this.curveStartWidth / 2 * projectionT
-            + this.curveEndWidth / 2 * (1 - projectionT));
+        const halfVecT = projectionT;
+        let halfVec = Vec2.ofXY(this.currentCurve.normal(halfVecT))
+            .normalized().times(this.curveStartWidth / 2 * halfVecT
+            + this.curveEndWidth / 2 * (1 - halfVecT));
+        // Computes a boundary curve. [direction] should be either +1 or -1 (determines the side
+        // of the center curve to place the boundary).
+        const computeBoundaryCurve = (direction, halfVec) => {
+            return new Bezier(startPt.plus(startVec.times(direction)), controlPoint.plus(halfVec.times(direction)), endPt.plus(endVec.times(direction)));
+        };
+        const upperBoundary = computeBoundaryCurve(1, halfVec);
+        const lowerBoundary = computeBoundaryCurve(-1, halfVec);
+        // If the boundaries have two intersections, increasing the half vector's length could fix this.
+        if (upperBoundary.intersects(lowerBoundary).length === 2) {
+            halfVec = halfVec.times(2);
+        }
         const pathCommands = [
             {
                 kind: PathCommandType.QuadraticBezierTo,

package/dist/src/geometry/Path.js

@@ -277,14 +277,24 @@ export default class Path {
         pathString = pathString.split('\n').join(' ');
         let lastPos = Vec2.zero;
         let firstPos = null;
+        let isFirstCommand = true;
         const commands = [];
         const moveTo = (point) => {
+            // The first moveTo/lineTo is already handled by the [startPoint] parameter of the Path constructor.
+            if (isFirstCommand) {
+                isFirstCommand = false;
+                return;
+            }
             commands.push({
                 kind: PathCommandType.MoveTo,
                 point,
             });
         };
         const lineTo = (point) => {
+            if (isFirstCommand) {
+                isFirstCommand = false;
+                return;
+            }
             commands.push({
                 kind: PathCommandType.LineTo,
                 point,
@@ -390,6 +400,7 @@ export default class Path {
             if (args.length > 0) {
                 firstPos !== null && firstPos !== void 0 ? firstPos : (firstPos = args[0]);
             }
+            isFirstCommand = false;
         }
         return new Path(firstPos !== null && firstPos !== void 0 ? firstPos : Vec2.zero, commands);
     }

package/dist/src/localization.d.ts

@@ -1,6 +1,6 @@
 import { CommandLocalization } from './commands/localization';
 import { ImageComponentLocalization } from './components/localization';
-import { ToolbarLocalization } from './toolbar/types';
+import { ToolbarLocalization } from './toolbar/localization';
 import { ToolLocalization } from './tools/localization';
 export interface EditorLocalization extends ToolbarLocalization, ToolLocalization, CommandLocalization, ImageComponentLocalization {
     undoAnnouncement: (actionDescription: string) => string;

package/dist/src/localization.js

@@ -1,5 +1,5 @@
 import { defaultCommandLocalization } from './commands/localization';
 import { defaultComponentLocalization } from './components/localization';
-import HTMLToolbar from './toolbar/HTMLToolbar';
+import { defaultToolbarLocalization } from './toolbar/localization';
 import { defaultToolLocalization } from './tools/localization';
-export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, HTMLToolbar.defaultLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });
+export const defaultEditorLocalization = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultToolbarLocalization), defaultToolLocalization), defaultCommandLocalization), defaultComponentLocalization), { loading: (percentage) => `Loading ${percentage}%...`, imageEditor: 'Image Editor', doneLoading: 'Done loading', undoAnnouncement: (commandDescription) => `Undid ${commandDescription}`, redoAnnouncement: (commandDescription) => `Redid ${commandDescription}` });

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

@@ -10,7 +10,9 @@ export default class SVGRenderer extends AbstractRenderer {
     private lastPath;
     private lastPathStart;
     private mainGroup;
+    private overwrittenAttrs;
     constructor(elem: SVGSVGElement, viewport: Viewport);
+    setRootSVGAttribute(name: string, value: string | null): void;
     displaySize(): Vec2;
     clear(): void;
     protected beginPath(startPoint: Point2): void;

package/dist/src/rendering/SVGRenderer.js

@@ -6,13 +6,38 @@ export default class SVGRenderer extends AbstractRenderer {
     constructor(elem, viewport) {
         super(viewport);
         this.elem = elem;
+        this.overwrittenAttrs = {};
         this.clear();
     }
+    // Sets an attribute on the root SVG element.
+    setRootSVGAttribute(name, value) {
+        // Make the original value of the attribute restorable on clear
+        if (!(name in this.overwrittenAttrs)) {
+            this.overwrittenAttrs[name] = this.elem.getAttribute(name);
+        }
+        if (value !== null) {
+            this.elem.setAttribute(name, value);
+        }
+        else {
+            this.elem.removeAttribute(name);
+        }
+    }
     displaySize() {
         return Vec2.of(this.elem.clientWidth, this.elem.clientHeight);
     }
     clear() {
         this.mainGroup = document.createElementNS(svgNameSpace, 'g');
+        // Restore all alltributes
+        for (const attrName in this.overwrittenAttrs) {
+            const value = this.overwrittenAttrs[attrName];
+            if (value) {
+                this.elem.setAttribute(attrName, value);
+            }
+            else {
+                this.elem.removeAttribute(attrName);
+            }
+        }
+        this.overwrittenAttrs = {};
         // Remove all children
         this.elem.replaceChildren(this.mainGroup);
     }

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

@@ -1,11 +1,10 @@
 import Editor from '../Editor';
-import { ToolbarLocalization } from './types';
+import { ToolbarLocalization } from './localization';
 export default class HTMLToolbar {
     private editor;
     private localizationTable;
     private container;
     private penTypes;
-    static defaultLocalization: ToolbarLocalization;
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
     addActionButton(text: string, command: () => void, parent?: Element): HTMLButtonElement;

package/dist/src/toolbar/HTMLToolbar.js

@@ -13,6 +13,7 @@ import EventDispatcher from '../EventDispatcher';
 import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
 import { makeLineBuilder } from '../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
+import { defaultToolbarLocalization } from './localization';
 const primaryForegroundFill = `
 	style='fill: var(--primary-foreground-color);'
 `;
@@ -431,7 +432,7 @@ class PenWidget extends ToolbarWidget {
 }
 PenWidget.idCounter = 0;
 export default class HTMLToolbar {
-    constructor(editor, parent, localizationTable = HTMLToolbar.defaultLocalization) {
+    constructor(editor, parent, localizationTable = defaultToolbarLocalization) {
         this.editor = editor;
         this.localizationTable = localizationTable;
         this.container = document.createElement('div');
@@ -550,22 +551,3 @@ export default class HTMLToolbar {
         this.addUndoRedoButtons();
     }
 }
-HTMLToolbar.defaultLocalization = {
-    pen: 'Pen',
-    eraser: 'Eraser',
-    select: 'Select',
-    touchDrawing: 'Touch Drawing',
-    thicknessLabel: 'Thickness: ',
-    colorLabel: 'Color: ',
-    resizeImageToSelection: 'Resize image to selection',
-    undo: 'Undo',
-    redo: 'Redo',
-    selectObjectType: 'Object type: ',
-    freehandPen: 'Freehand',
-    arrowPen: 'Arrow',
-    linePen: 'Line',
-    outlinedRectanglePen: 'Outlined rectangle',
-    filledRectanglePen: 'Filled rectangle',
-    dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
-    dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
-};

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

@@ -0,0 +1,20 @@
+export interface ToolbarLocalization {
+    outlinedRectanglePen: string;
+    filledRectanglePen: string;
+    linePen: string;
+    arrowPen: string;
+    freehandPen: string;
+    selectObjectType: string;
+    colorLabel: string;
+    pen: string;
+    eraser: string;
+    select: string;
+    touchDrawing: string;
+    thicknessLabel: string;
+    resizeImageToSelection: string;
+    undo: string;
+    redo: string;
+    dropdownShown: (toolName: string) => string;
+    dropdownHidden: (toolName: string) => string;
+}
+export declare const defaultToolbarLocalization: ToolbarLocalization;

package/dist/src/toolbar/localization.js

@@ -0,0 +1,19 @@
+export const defaultToolbarLocalization = {
+    pen: 'Pen',
+    eraser: 'Eraser',
+    select: 'Select',
+    touchDrawing: 'Touch Drawing',
+    thicknessLabel: 'Thickness: ',
+    colorLabel: 'Color: ',
+    resizeImageToSelection: 'Resize image to selection',
+    undo: 'Undo',
+    redo: 'Redo',
+    selectObjectType: 'Object type: ',
+    freehandPen: 'Freehand',
+    arrowPen: 'Arrow',
+    linePen: 'Line',
+    outlinedRectanglePen: 'Outlined rectangle',
+    filledRectanglePen: 'Filled rectangle',
+    dropdownShown: (toolName) => `Dropdown for ${toolName} shown`,
+    dropdownHidden: (toolName) => `Dropdown for ${toolName} hidden`,
+};

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

@@ -2,22 +2,3 @@ export declare enum ToolbarButtonType {
     ToggleButton = 0,
     ActionButton = 1
 }
-export interface ToolbarLocalization {
-    outlinedRectanglePen: string;
-    filledRectanglePen: string;
-    linePen: string;
-    arrowPen: string;
-    freehandPen: string;
-    selectObjectType: string;
-    colorLabel: string;
-    pen: string;
-    eraser: string;
-    select: string;
-    touchDrawing: string;
-    thicknessLabel: string;
-    resizeImageToSelection: string;
-    undo: string;
-    redo: string;
-    dropdownShown: (toolName: string) => string;
-    dropdownHidden: (toolName: string) => string;
-}

package/dist/src/tools/SelectionTool.js

@@ -21,7 +21,7 @@ const styles = `
 	}
 
 	.handleOverlay > .selectionBox {
-		position: fixed;
+		position: absolute;
 		z-index: 0;
 		transform-origin: center;
 	}

package/dist-test/test-dist-bundle.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+		<meta charset="utf-8"/>
+		<title>Editor from a bundle</title>
+		<style>
+			body .imageEditorContainer {
+				height: 800px;
+
+				--primary-background-color: green;
+				--primary-background-color-transparent: rgba(255, 240, 200, 0.5);
+				--secondary-background-color: yellow;
+				--primary-foreground-color: black;
+				--secondary-foreground-color: black;
+			}
+		</style>
+	</head>
+	<body>
+		<p>
+			This file tests the bundled version of <code>js-draw</code>.
+			Be sure to run <code>yarn build</code> before opening this!
+		</p>
+		<script src="../dist/bundle.js"></script>
+		<script>
+			const editor1 = new jsdraw.Editor(document.body, {
+				wheelEventsEnabled: false,
+			});
+			editor1.addToolbar();
+
+			const editor2 = new jsdraw.Editor(document.body);
+			editor2.addToolbar();
+		</script>
+	</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "0.0.4",
+  "version": "0.0.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",
@@ -29,6 +29,9 @@
     },
     "./toolbar/toolbar.css": {
       "default": "./src/toolbar/toolbar.css"
+    },
+    "./bundle": {
+      "default": "./dist/bundle.js"
     }
   },
   "repository": {
@@ -40,7 +43,7 @@
   "private": false,
   "scripts": {
     "test": "jest",
-    "build": "yarn tsc",
+    "build": "rm -rf ./dist; mkdir dist && yarn tsc && ts-node ./build_tools/bundle.ts",
     "lint": "eslint .",
     "linter-precommit": "eslint --fix --ext .js --ext .ts",
     "lint-staged": "lint-staged",
@@ -59,6 +62,7 @@
     "@types/node": "^18.7.9",
     "@typescript-eslint/eslint-plugin": "^5.33.1",
     "@typescript-eslint/parser": "^5.33.1",
+    "css-loader": "^6.7.1",
     "eslint": "^8.22.0",
     "husky": "^8.0.1",
     "jest": "^28.1.3",
@@ -66,8 +70,13 @@
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",
     "pinst": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.3.5",
     "ts-jest": "^28.0.8",
-    "typescript": "^4.7.4"
+    "ts-loader": "^9.3.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.2",
+    "webpack": "^5.74.0"
   },
   "bugs": {
     "url": "https://github.com/personalizedrefrigerator/js-draw/issues"

package/src/Display.ts

@@ -22,9 +22,11 @@ export default class Display {
 	) {
 		if (mode === RenderingMode.CanvasRenderer) {
 			this.initializeCanvasRendering();
-		} else {
+		} else if (mode === RenderingMode.DummyRenderer) {
 			this.dryInkRenderer = new DummyRenderer(editor.viewport);
 			this.wetInkRenderer = new DummyRenderer(editor.viewport);
+		} else {
+			throw new Error(`Unknown rendering mode, ${mode}!`);
 		}
 
 

package/src/Editor.css

@@ -12,7 +12,6 @@
 
 @media (prefers-color-scheme: dark) {
 	.imageEditorContainer {
-		/* Deafult colors for the editor */
 		--primary-background-color: #151515;
 		--primary-background-color-transparent: rgba(50, 50, 50, 0.5);
 		--secondary-background-color: #607;

package/src/Editor.ts

@@ -19,6 +19,19 @@ import Mat33 from './geometry/Mat33';
 import Rect2 from './geometry/Rect2';
 import { defaultEditorLocalization, EditorLocalization } from './localization';
 
+export interface EditorSettings {
+	// Defaults to RenderingMode.CanvasRenderer
+	renderingMode: RenderingMode,
+
+	// Uses a default English localization if a translation is not given.
+	localization: Partial<EditorLocalization>,
+
+	// True if touchpad/mousewheel scrolling should scroll the editor instead of the document.
+	// This does not include pinch-zoom events.
+	// Defaults to true.
+	wheelEventsEnabled: boolean;
+}
+
 export class Editor {
 	// Wrapper around the viewport and toolbar
 	private container: HTMLElement;
@@ -39,23 +52,29 @@ export class Editor {
 	private loadingWarning: HTMLElement;
 	private accessibilityAnnounceArea: HTMLElement;
 
+	private settings: EditorSettings;
+
 	public constructor(
 		parent: HTMLElement,
-		renderingMode: RenderingMode = RenderingMode.CanvasRenderer,
-
-		// Uses a default English localization if a translation is not given.
-		localization?: Partial<EditorLocalization>,
+		settings: Partial<EditorSettings> = {},
 	) {
+		this.localization = {
+			...this.localization,
+			...settings.localization,
+		};
+
+		// Fill default settings.
+		this.settings = {
+			wheelEventsEnabled: settings.wheelEventsEnabled ?? true,
+			renderingMode: settings.renderingMode ?? RenderingMode.CanvasRenderer,
+			localization: this.localization,
+		};
+
 		this.container = document.createElement('div');
 		this.renderingRegion = document.createElement('div');
 		this.container.appendChild(this.renderingRegion);
 		this.container.className = 'imageEditorContainer';
 
-		this.localization = {
-			...this.localization,
-			...localization,
-		};
-
 		this.loadingWarning = document.createElement('div');
 		this.loadingWarning.classList.add('loadingMessage');
 		this.loadingWarning.ariaLive = 'polite';
@@ -74,7 +93,7 @@ export class Editor {
 		this.notifier = new EventDispatcher();
 		this.importExportViewport = new Viewport(this.notifier);
 		this.viewport = new Viewport(this.notifier);
-		this.display = new Display(this, renderingMode, this.renderingRegion);
+		this.display = new Display(this, this.settings.renderingMode, this.renderingRegion);
 		this.image = new EditorImage();
 		this.history = new UndoRedoHistory(this, this.announceRedoCallback, this.announceUndoCallback);
 		this.toolController = new ToolController(this, this.localization);
@@ -93,6 +112,13 @@ export class Editor {
 		this.hideLoadingWarning();
 	}
 
+	// Returns a reference to this' container.
+	// Example usage:
+	//   editor.getRootElement().style.height = '500px';
+	public getRootElement(): HTMLElement {
+		return this.container;
+	}
+
 	// [fractionLoaded] should be a number from 0 to 1, where 1 represents completely loaded.
 	public showLoadingWarning(fractionLoaded: number) {
 		const loadingPercent = Math.round(fractionLoaded * 100);
@@ -160,8 +186,18 @@ export class Editor {
 				evt, pointers[evt.pointerId]?.down ?? false, this.viewport
 			);
 			if (pointer.down) {
-				pointers[pointer.id] = pointer;
+				const prevData = pointers[pointer.id];
+
+				if (prevData) {
+					const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
 
+					// If the pointer moved less than two pixels, don't send a new event.
+					if (distanceMoved < 2) {
+						return;
+					}
+				}
+
+				pointers[pointer.id] = pointer;
 				if (this.toolController.dispatchInputEvent({
 					kind: InputEvtType.PointerMoveEvt,
 					current: pointer,
@@ -210,6 +246,12 @@ export class Editor {
 		this.container.addEventListener('wheel', evt => {
 			let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
 
+			// Process wheel events if the ctrl key is down -- we do want to handle
+			// pinch-zooming.
+			if (!this.settings.wheelEventsEnabled && !evt.ctrlKey) {
+				return;
+			}
+
 			if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
 				delta = delta.times(15);
 			} else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
@@ -405,6 +447,7 @@ export class Editor {
 		result.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.w} ${rect.h}`);
 		result.setAttribute('width', `${rect.w}`);
 		result.setAttribute('height', `${rect.h}`);
+		console.log('res', result);
 
 		// Ensure the image can be identified as an SVG if downloaded.
 		// See https://jwatt.org/svg/authoring/

package/src/EditorImage.test.ts

@@ -10,6 +10,8 @@ import { RenderingMode } from './Display';
 import DummyRenderer from './rendering/DummyRenderer';
 import { RenderingStyle } from './rendering/AbstractRenderer';
 
+const createEditor = () => new Editor(document.body, { renderingMode: RenderingMode.DummyRenderer });
+
 describe('EditorImage', () => {
 	const testStroke = new Stroke([
 		{
@@ -29,7 +31,7 @@ describe('EditorImage', () => {
 	const addTestStrokeCommand = new EditorImage.AddElementCommand(testStroke);
 
 	it('elements added to the image should be findable', () => {
-		const editor = new Editor(document.body, RenderingMode.DummyRenderer);
+		const editor = createEditor();
 		const image = editor.image;
 
 		// We haven't activated the command, so testStroke's parent should be null.
@@ -39,7 +41,7 @@ describe('EditorImage', () => {
 	});
 
 	it('should render an element added to the image', () => {
-		const editor = new Editor(document.body, RenderingMode.DummyRenderer);
+		const editor = createEditor();
 		const renderer = editor.display.getDryInkRenderer();
 		if (!(renderer instanceof DummyRenderer)) {
 			throw new Error('Wrong display type!');
@@ -56,7 +58,7 @@ describe('EditorImage', () => {
 	});
 
 	it('should have a 1-deep tree if two non-overlapping strokes are added', () => {
-		const editor = new Editor(document.body, RenderingMode.DummyRenderer);
+		const editor = createEditor();
 		const image = editor.image;
 
 		const leftmostStroke = new Stroke([

package/src/SVGLoader.ts

@@ -1,6 +1,7 @@
 import Color4 from './Color4';
 import AbstractComponent from './components/AbstractComponent';
 import Stroke from './components/Stroke';
+import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
@@ -66,10 +67,14 @@ export default class SVGLoader implements ImageLoader {
 		const parts = pathData.split('M');
 		let isFirst = true;
 		for (const part of parts) {
-			if (part !== '') {
+			// Skip effective no-ops -- moveTos without additional commands.
+			const isNoOpMoveTo = /^[0-9., \t\n]+$/.exec(part);
+
+			if (part !== '' && !isNoOpMoveTo) {
 				// We split the path by moveTo commands, so add the 'M' back in
 				// if it was present.
 				const current = !isFirst ? `M${part}` : part;
+
 				const path = Path.fromString(current);
 				const spec = path.toRenderable(style);
 				result.push(spec);
@@ -123,6 +128,10 @@ export default class SVGLoader implements ImageLoader {
 		this.rootViewBox = new Rect2(x, y, width, height);
 	}
 
+	private updateSVGAttrs(node: SVGSVGElement) {
+		this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+	}
+
 	private async visit(node: Element) {
 		this.totalToProcess += node.childElementCount;
 
@@ -135,6 +144,7 @@ export default class SVGLoader implements ImageLoader {
 			break;
 		case 'svg':
 			this.updateViewBox(node as SVGSVGElement);
+			this.updateSVGAttrs(node as SVGSVGElement);
 			break;
 		default:
 			console.warn('Unknown SVG element,', node);
@@ -154,6 +164,13 @@ export default class SVGLoader implements ImageLoader {
 		await this.onProgress?.(this.processedCount, this.totalToProcess);
 	}
 
+	// Get SVG element attributes (e.g. xlink=...)
+	private getSourceAttrs(node: SVGSVGElement): Array<[string, string|null]> {
+		return node.getAttributeNames().map(attr => {
+			return [ attr, node.getAttribute(attr) ];
+		});
+	}
+
 	public async start(
 		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener
 	): Promise<Rect2> {

package/src/bundle/bundled.ts

@@ -0,0 +1,7 @@
+// Main entrypoint for Webpack when building a bundle for release.
+
+import '../styles';
+import Editor from '../Editor';
+
+export default Editor;
+export { Editor };

package/src/components/SVGGlobalAttributesObject.ts

@@ -0,0 +1,39 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer from '../rendering/AbstractRenderer';
+import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+// Stores global SVG attributes (e.g. namespace identifiers.)
+export default class SVGGlobalAttributesObject extends AbstractComponent {
+	protected contentBBox: Rect2;
+	public constructor(private readonly attrs: Array<[string, string|null]>) {
+		super();
+		this.contentBBox = Rect2.empty;
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		if (!(canvas instanceof SVGRenderer)) {
+			// Don't draw unrenderable objects if we can't
+			return;
+		}
+
+		console.log('Rendering to SVG.', this.attrs);
+		for (const [ attr, value ] of this.attrs) {
+			canvas.setRootSVGAttribute(attr, value);
+		}
+	}
+
+	public intersects(_lineSegment: LineSegment2): boolean {
+		return false;
+	}
+
+	protected applyTransformation(_affineTransfm: Mat33): void {
+	}
+
+	public description(localization: ImageComponentLocalization): string {
+		return localization.svgObject;
+	}
+}