js-draw 0.17.3 → 0.17.4

package/dist/src/testing/sendTouchEvent.js

@@ -1,5 +1,41 @@
 import Pointer, { PointerDevice } from '../Pointer';
 import { InputEvtType } from '../types';
+/**
+ * Dispatch a touch event to the currently selected tool. Intended for unit tests.
+ *
+ * @see {@link sendPenEvent}
+ *
+ * @example
+ * **Simulating a horizontal swipe gesture:**
+ * ```ts
+ * sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * for (let i = 1; i <= 10; i++) {
+ *   jest.advanceTimersByTime(10);
+ *   sendTouchEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i * 10, 0));
+ * }
+ * ```
+ *
+ * @example
+ * **Simulating a pinch gesture.** This example assumes that you're using [Jest with timer mocks enabled](https://jestjs.io/docs/timer-mocks).
+ * ```ts
+ * let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(100, 0), [ firstPointer ]);
+ *
+ * // Simulate a pinch
+ * const maxIterations = 10;
+ * for (let i = 0; i < maxIterations; i++) {
+ *   // Use the unit testing framework's tool for increasing the current time
+ *   // returned by (new Date()).getTime(), etc.
+ *   jest.advanceTimersByTime(100);
+ *
+ *   const point1 = Vec2.of(-i * 5, 0);
+ *   const point2 = Vec2.of(i * 5 + 100, 0);
+ *
+ *   firstPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point1, [ secondPointer ]);
+ *   secondPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point2, [ firstPointer ]);
+ * }
+ * ```
+ */
 const sendTouchEvent = (editor, eventType, screenPos, allOtherPointers) => {
     const canvasPos = editor.viewport.screenToCanvas(screenPos);
     let ptrId = 0;

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

@@ -1,6 +1,7 @@
 import { EditorImageEventType } from '../../EditorImage';
 import Rect2 from '../../math/Rect2';
 import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
 import makeColorInput from '../makeColorInput';
 import BaseWidget from './BaseWidget';
 export default class DocumentPropertiesWidget extends BaseWidget {
@@ -61,6 +62,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     }
     fillDropdown(dropdown) {
         const container = document.createElement('div');
+        container.classList.add(`${toolbarCSSPrefix}spacedList`);
         const backgroundColorRow = document.createElement('div');
         const backgroundColorLabel = document.createElement('label');
         backgroundColorLabel.innerText = this.localizationTable.backgroundColor;
@@ -69,7 +71,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
                 this.setBackgroundColor(color);
             }
         });
-        colorInput.id = `document-properties-color-input-${DocumentPropertiesWidget.idCounter++}`;
+        colorInput.id = `${toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
         backgroundColorLabel.htmlFor = colorInput.id;
         backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
         const addDimensionRow = (labelContent, onChange) => {
@@ -80,7 +82,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
             label.innerText = labelContent;
             input.type = 'number';
             input.min = '0';
-            input.id = `document-properties-dimension-row-${DocumentPropertiesWidget.idCounter++}`;
+            input.id = `${toolbarCSSPrefix}docPropertiesDimensionRow-${DocumentPropertiesWidget.idCounter++}`;
             label.htmlFor = input.id;
             spacer.style.flexGrow = '1';
             input.style.flexGrow = '2';

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

@@ -97,6 +97,7 @@ export default class PenToolWidget extends BaseToolWidget {
     }
     fillDropdown(dropdown) {
         const container = document.createElement('div');
+        container.classList.add(`${toolbarCSSPrefix}spacedList`);
         const thicknessRow = document.createElement('div');
         const objectTypeRow = document.createElement('div');
         // Thickness: Value of the input is squared to allow for finer control/larger values.

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

@@ -24,6 +24,8 @@ export default class TextToolWidget extends BaseToolWidget {
         return this.editor.icons.makeTextIcon(textStyle);
     }
     fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add(`${toolbarCSSPrefix}spacedList`);
         const fontRow = document.createElement('div');
         const colorRow = document.createElement('div');
         const sizeRow = document.createElement('div');
@@ -83,7 +85,8 @@ export default class TextToolWidget extends BaseToolWidget {
             sizeInput.value = `${style.size}`;
         };
         this.updateDropdownInputs();
-        dropdown.replaceChildren(colorRow, sizeRow, fontRow);
+        container.replaceChildren(colorRow, sizeRow, fontRow);
+        dropdown.appendChild(container);
         return true;
     }
     serializeState() {

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

@@ -306,19 +306,18 @@ export default class SelectionTool extends BaseTool {
         }
         const exportViewport = new Viewport(() => { });
         exportViewport.updateScreenSize(Vec2.of(bbox.w, bbox.h));
-        exportViewport.resetTransform(Mat33.translation(bbox.topLeft));
-        const svgNameSpace = 'http://www.w3.org/2000/svg';
-        const exportElem = document.createElementNS(svgNameSpace, 'svg');
+        exportViewport.resetTransform(Mat33.translation(bbox.topLeft.times(-1)));
         const sanitize = true;
-        const renderer = new SVGRenderer(exportElem, exportViewport, sanitize);
+        const { element: svgExportElem, renderer: svgRenderer } = SVGRenderer.fromViewport(exportViewport, sanitize);
         const text = [];
         for (const elem of selectedElems) {
-            elem.render(renderer);
+            elem.render(svgRenderer);
             if (elem instanceof TextComponent) {
                 text.push(elem.getText());
             }
         }
-        event.setData('image/svg+xml', exportElem.outerHTML);
+        event.setData('image/svg+xml', svgExportElem.outerHTML);
+        event.setData('text/html', svgExportElem.outerHTML);
         if (text.length > 0) {
             event.setData('text/plain', text.join('\n'));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.17.3",
+	"version": "0.17.4",
 	"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/Editor.ts

@@ -28,6 +28,7 @@ import SelectionTool from './tools/SelectionTool/SelectionTool';
 import AbstractComponent from './components/AbstractComponent';
 import Erase from './commands/Erase';
 import ImageBackground, { BackgroundType } from './components/ImageBackground';
+import sendPenEvent from './testing/sendPenEvent';
 
 type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
 type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
@@ -67,6 +68,9 @@ export interface EditorSettings {
  *   // Do something with saveData...
  * });
  * ```
+ * 
+ * See also
+ * [`docs/example/example.ts`](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/example/example.ts#L15).
  */
 export class Editor {
 	// Wrapper around the viewport and toolbar
@@ -156,6 +160,8 @@ export class Editor {
 	 *
 	 * // Add the default toolbar
 	 * const toolbar = editor.addToolbar();
+	 * 
+	 * // Add a save button
 	 * toolbar.addActionButton({
 	 *   label: 'Save'
 	 *   icon: createSaveIcon(),
@@ -260,6 +266,7 @@ export class Editor {
 	 *
 	 * @example
 	 * ```
+	 *   // Set the editor's height to 500px
 	 *   editor.getRootElement().style.height = '500px';
 	 * ```
 	 */
@@ -282,8 +289,10 @@ export class Editor {
 
 	private previousAccessibilityAnnouncement: string = '';
 
-	// Announce `message` for screen readers. If `message` is the same as the previous
-	// message, it is re-announced.
+	/**
+	 * Announce `message` for screen readers. If `message` is the same as the previous
+	 * message, it is re-announced.
+	 */
 	public announceForAccessibility(message: string) {
 		// Force re-announcing an announcement if announced again.
 		if (message === this.previousAccessibilityAnnouncement) {
@@ -576,6 +585,25 @@ export class Editor {
 		}
 	}
 
+	/**
+	 * Forward pointer events from `elem` to this editor. Such that right-click/right-click drag
+	 * events are also forwarded, `elem`'s contextmenu is disabled.
+	 * 
+	 * @example
+	 * ```ts
+	 * const overlay = document.createElement('div');
+	 * editor.createHTMLOverlay(overlay);
+	 * 
+	 * // Send all pointer events that don't have the control key pressed
+	 * // to the editor.
+	 * editor.handlePointerEventsFrom(overlay, (event) => {
+	 *   if (event.ctrlKey) {
+	 *     return false;
+	 *   }
+	 *   return true;
+	 * });
+	 * ```
+	 */
 	public handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter) {
 		// May be required to prevent text selection on iOS/Safari:
 		// See https://stackoverflow.com/a/70992717/17055750
@@ -741,7 +769,7 @@ export class Editor {
 	 * Schedule a re-render for some time in the near future. Does not schedule an additional
 	 * re-render if a re-render is already queued.
 	 *
-	 * @returns a promise that resolves when 
+	 * @returns a promise that resolves when re-rendering has completed.
 	 */
 	public queueRerender(): Promise<void> {
 		if (!this.rerenderQueued) {
@@ -766,6 +794,11 @@ export class Editor {
 		return this.rerenderQueued;
 	}
 
+	/**
+	 * Re-renders the entire image.
+	 * 
+	 * @see {@link Editor.queueRerender}
+	 */
 	public rerender(showImageBounds: boolean = true) {
 		this.display.startRerender();
 
@@ -795,6 +828,9 @@ export class Editor {
 	}
 
 	/**
+	 * Draws the given path onto the wet ink renderer. The given path will
+	 * be displayed on top of the main image.
+	 * 
 	 * @see {@link Display.getWetInkRenderer} {@link Display.flatten}
 	 */
 	public drawWetInk(...path: RenderablePathSpec[]) {
@@ -804,19 +840,28 @@ export class Editor {
 	}
 
 	/**
+	 * Clears the wet ink display.
+	 * 
 	 * @see {@link Display.getWetInkRenderer}
 	 */
 	public clearWetInk() {
 		this.display.getWetInkRenderer().clear();
 	}
 
-	// Focuses the region used for text input/key commands.
+	/**
+	 * Focuses the region used for text input/key commands.
+	 */
 	public focus() {
 		this.renderingRegion.focus();
 	}
 
-	// Creates an element that will be positioned on top of the dry/wet ink
-	// renderers.
+	/**
+	 * Creates an element that will be positioned on top of the dry/wet ink
+	 * renderers.
+	 * 
+	 * This is useful for displaying content on top of the rendered content
+	 * (e.g. a selection box).
+	 */
 	public createHTMLOverlay(overlay: HTMLElement) {
 		overlay.classList.add('overlay');
 		this.container.appendChild(overlay);
@@ -850,8 +895,13 @@ export class Editor {
 		});
 	}
 
-	// Dispatch a pen event to the currently selected tool.
-	// Intended primarially for unit tests.
+	/**
+	 * Dispatch a pen event to the currently selected tool.
+	 * Intended primarially for unit tests.
+	 * 
+	 * @deprecated
+	 * @see {@link sendPenEvent} {@link sendTouchEvent}
+	 */
 	public sendPenEvent(
 		eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,
 		point: Point2,
@@ -859,16 +909,7 @@ export class Editor {
 		// @deprecated
 		allPointers?: Pointer[]
 	) {
-		const mainPointer = Pointer.ofCanvasPoint(
-			point, eventType !== InputEvtType.PointerUpEvt, this.viewport
-		);
-		this.toolController.dispatchInputEvent({
-			kind: eventType,
-			allPointers: allPointers ?? [
-				mainPointer,
-			],
-			current: mainPointer,
-		});
+		sendPenEvent(this, eventType, point, allPointers);
 	}
 
 	public async addAndCenterComponents(components: AbstractComponent[], selectComponents: boolean = true) {
@@ -947,9 +988,9 @@ export class Editor {
 
 	public toSVG(): SVGElement {
 		const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
-		const svgNameSpace = 'http://www.w3.org/2000/svg';
-		const result = document.createElementNS(svgNameSpace, 'svg');
-		const renderer = new SVGRenderer(result, importExportViewport);
+
+		const sanitize = false;
+		const { element: result, renderer } = SVGRenderer.fromViewport(importExportViewport, sanitize);
 
 		const origTransform = importExportViewport.canvasToScreenTransform;
 		// Render with (0,0) at (0,0) — we'll handle translation with
@@ -967,13 +1008,6 @@ export class Editor {
 		result.setAttribute('width', toRoundedString(rect.w));
 		result.setAttribute('height', toRoundedString(rect.h));
 
-		// Ensure the image can be identified as an SVG if downloaded.
-		// See https://jwatt.org/svg/authoring/
-		result.setAttribute('version', '1.1');
-		result.setAttribute('baseProfile', 'full');
-		result.setAttribute('xmlns', svgNameSpace);
-
-
 		return result;
 	}
 

package/src/EditorImage.ts

@@ -94,8 +94,10 @@ export default class EditorImage {
 	}
 
 	/**
-	 * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`)
-	 * @internal
+	 * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`).
+	 * 
+	 * `viewport` is used to improve rendering performance. If given, it must match
+	 * the viewport used by the `renderer` (if any).
 	 */
 	public render(renderer: AbstractRenderer, viewport: Viewport|null) {
 		this.background.render(renderer, viewport?.visibleRect);

package/src/SVGLoader.ts

@@ -450,6 +450,10 @@ export default class SVGLoader implements ImageLoader {
 	}
 
 	/**
+	 * Create an `SVGLoader` from the content of an SVG image. SVGs are loaded within a sandboxed
+	 * iframe with `sandbox="allow-same-origin"`
+	 * [thereby disabling JavaScript](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox).
+	 * 
 	 * @see {@link Editor.loadFrom}
 	 * @param text - Textual representation of the SVG (e.g. `<svg viewbox='...'>...</svg>`).
 	 * @param sanitize - if `true`, don't store unknown attributes.

package/src/lib.ts

@@ -1,6 +1,6 @@
 /**
  * The main entrypoint for the NPM package. Everything exported by this file
- * is available through the `js-draw` package.
+ * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw).
  * 
  * @example
  * ```
@@ -28,6 +28,7 @@ export * from './commands/lib';
 export * from './tools/lib';
 export * from './toolbar/lib';
 export * from './rendering/lib';
+export * from './testing/lib';
 export { default as Pointer, PointerDevice } from './Pointer';
 export { default as HTMLToolbar } from './toolbar/HTMLToolbar';
 export { default as UndoRedoHistory } from './UndoRedoHistory';

package/src/rendering/lib.ts

@@ -1,4 +1,6 @@
 
 export { default as AbstractRenderer } from './renderers/AbstractRenderer';
 export { default as DummyRenderer } from './renderers/DummyRenderer';
+export { default as SVGRenderer } from './renderers/SVGRenderer';
+export { default as CanvasRenderer } from './renderers/CanvasRenderer';
 export { default as Display } from './Display';

package/src/rendering/renderers/CanvasRenderer.ts

@@ -10,6 +10,26 @@ import RenderingStyle from '../RenderingStyle';
 import TextStyle from '../TextRenderingStyle';
 import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './AbstractRenderer';
 
+/**
+ * Renders onto a `CanvasRenderingContext2D`.
+ * 
+ * @example
+ * ```ts
+ * const editor = new Editor(document.body);
+ * 
+ * const canvas = document.createElement('canvas');
+ * const ctx = canvas.getContext('2d');
+ * 
+ * // Ensure that the canvas can fit the entire rendering
+ * const viewport = editor.image.getImportExportViewport();
+ * canvas.width = viewport.getScreenRectSize().x;
+ * canvas.height = viewport.getScreenRectSize().y;
+ * 
+ * // Render editor.image onto the renderer
+ * const renderer = new CanvasRenderer(ctx, viewport);
+ * editor.image.render(renderer, viewport);
+ * ```
+ */
 export default class CanvasRenderer extends AbstractRenderer {
 	private ignoreObjectsAboveLevel: number|null = null;
 	private ignoringObject: boolean = false;
@@ -26,6 +46,11 @@ export default class CanvasRenderer extends AbstractRenderer {
 	private minRenderSizeAnyDimen: number;
 	private minRenderSizeBothDimens: number;
 
+	/**
+	 * Creates a new `CanvasRenderer` that renders to the given rendering context.
+	 * The `viewport` is used to determine the translation/rotation/scaling of the content
+	 * to draw.
+	 */
 	public constructor(private ctx: CanvasRenderingContext2D, viewport: Viewport) {
 		super(viewport);
 		this.setDraftMode(false);
@@ -231,6 +256,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		}
 	}
 
+	// @internal
 	public drawPoints(...points: Point2[]) {
 		const pointRadius = 10;
 
@@ -255,6 +281,7 @@ export default class CanvasRenderer extends AbstractRenderer {
 		}
 	}
 
+	// @internal
 	public isTooSmallToRender(rect: Rect2): boolean {
 		// Should we ignore all objects within this object's bbox?
 		const diagonal = this.getCanvasToScreenTransform().transformVec3(rect.size);

package/src/rendering/renderers/SVGRenderer.ts

@@ -14,6 +14,12 @@ import AbstractRenderer, { RenderableImage, RenderablePathSpec } from './Abstrac
 export const renderedStylesheetId = 'js-draw-style-sheet';
 
 const svgNameSpace = 'http://www.w3.org/2000/svg';
+
+/**
+ * Renders onto an `SVGElement`.
+ * 
+ * @see {@link Editor.toSVG}
+ */
 export default class SVGRenderer extends AbstractRenderer {
 	private lastPathStyle: RenderingStyle|null = null;
 	private lastPathString: string[] = [];
@@ -21,7 +27,12 @@ export default class SVGRenderer extends AbstractRenderer {
 
 	private overwrittenAttrs: Record<string, string|null> = {};
 
-	// Renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+	/**
+	 * Creates a renderer that renders onto `elem`. If `sanitize`, don't render potentially untrusted data.
+	 * 
+	 * `viewport` is used to determine the translation/rotation/scaling/output size of the rendered
+	 * data.
+	 */
 	public constructor(private elem: SVGSVGElement, viewport: Viewport, private sanitize: boolean = false) {
 		super(viewport);
 		this.clear();
@@ -320,4 +331,24 @@ export default class SVGRenderer extends AbstractRenderer {
 	public isTooSmallToRender(_rect: Rect2): boolean {
 		return false;
 	}
+
+	// Creates a new SVG element and SVGRenerer with attributes set for the given Viewport.
+	public static fromViewport(viewport: Viewport, sanitize: boolean = true) {
+		const svgNameSpace = 'http://www.w3.org/2000/svg';
+		const result = document.createElementNS(svgNameSpace, 'svg');
+
+		const rect = viewport.getScreenRectSize();
+		// rect.x -> size of rect in x direction, rect.y -> size of rect in y direction.
+		result.setAttribute('viewBox', [0, 0, rect.x, rect.y].map(part => toRoundedString(part)).join(' '));
+		result.setAttribute('width', toRoundedString(rect.x));
+		result.setAttribute('height', toRoundedString(rect.y));
+
+		// Ensure the image can be identified as an SVG if downloaded.
+		// See https://jwatt.org/svg/authoring/
+		result.setAttribute('version', '1.1');
+		result.setAttribute('baseProfile', 'full');
+		result.setAttribute('xmlns', svgNameSpace);
+
+		return { element: result, renderer: new SVGRenderer(result, viewport, sanitize) };
+	}
 }

package/src/testing/lib.ts

@@ -0,0 +1,3 @@
+
+export { default as sendPenEvent } from './sendPenEvent';
+export { default as sendTouchEvent } from './sendTouchEvent';

package/src/testing/sendPenEvent.ts

@@ -0,0 +1,31 @@
+import Editor from '../Editor';
+import { Point2 } from '../math/Vec2';
+import Pointer from '../Pointer';
+import { InputEvtType } from '../types';
+
+/**
+ * Dispatch a pen event to the currently selected tool.
+ * Intended for unit tests.
+ * 
+ * @see {@link sendTouchEvent}
+ */
+const sendPenEvent = (
+	editor: Editor,
+	eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,
+	point: Point2,
+
+	allPointers?: Pointer[]
+) => {
+	const mainPointer = Pointer.ofCanvasPoint(
+		point, eventType !== InputEvtType.PointerUpEvt, editor.viewport
+	);
+
+	editor.toolController.dispatchInputEvent({
+		kind: eventType,
+		allPointers: allPointers ?? [
+			mainPointer,
+		],
+		current: mainPointer,
+	});
+};
+export default sendPenEvent;

package/src/testing/sendTouchEvent.ts

@@ -3,7 +3,42 @@ import { Vec2 } from '../math/Vec2';
 import Pointer, { PointerDevice } from '../Pointer';
 import { InputEvtType } from '../types';
 
-
+/**
+ * Dispatch a touch event to the currently selected tool. Intended for unit tests.
+ * 
+ * @see {@link sendPenEvent}
+ * 
+ * @example
+ * **Simulating a horizontal swipe gesture:**
+ * ```ts
+ * sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * for (let i = 1; i <= 10; i++) {
+ *   jest.advanceTimersByTime(10);
+ *   sendTouchEvent(editor, InputEvtType.PointerMoveEvt, Vec2.of(i * 10, 0));
+ * }
+ * ```
+ * 
+ * @example
+ * **Simulating a pinch gesture.** This example assumes that you're using [Jest with timer mocks enabled](https://jestjs.io/docs/timer-mocks).
+ * ```ts
+ * let firstPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(0, 0));
+ * let secondPointer = sendTouchEvent(editor, InputEvtType.PointerDownEvt, Vec2.of(100, 0), [ firstPointer ]);
+ * 
+ * // Simulate a pinch
+ * const maxIterations = 10;
+ * for (let i = 0; i < maxIterations; i++) {
+ *   // Use the unit testing framework's tool for increasing the current time
+ *   // returned by (new Date()).getTime(), etc.
+ *   jest.advanceTimersByTime(100);
+ * 
+ *   const point1 = Vec2.of(-i * 5, 0);
+ *   const point2 = Vec2.of(i * 5 + 100, 0);
+ * 
+ *   firstPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point1, [ secondPointer ]);
+ *   secondPointer = sendTouchEvent(editor, InputEvtType.PointerMoveEvt, point2, [ firstPointer ]);
+ * }
+ * ```
+ */
 const sendTouchEvent = (
 	editor: Editor,
 	eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,

package/src/toolbar/toolbar.css

@@ -206,3 +206,8 @@
 	background-color: var(--secondary-background-color);
 	--icon-color: var(--secondary-foreground-color);
 }
+
+.toolbar-spacedList > * {
+	padding-bottom: 5px;
+	padding-top: 5px;
+}

package/src/toolbar/widgets/DocumentPropertiesWidget.ts

@@ -3,6 +3,7 @@ import Editor from '../../Editor';
 import { EditorImageEventType } from '../../EditorImage';
 import Rect2 from '../../math/Rect2';
 import { EditorEventType } from '../../types';
+import { toolbarCSSPrefix } from '../HTMLToolbar';
 import { ToolbarLocalization } from '../localization';
 import makeColorInput from '../makeColorInput';
 import BaseWidget from './BaseWidget';
@@ -89,6 +90,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
+		container.classList.add(`${toolbarCSSPrefix}spacedList`);
 
 		const backgroundColorRow = document.createElement('div');
 		const backgroundColorLabel = document.createElement('label');
@@ -101,7 +103,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 			}
 		});
 
-		colorInput.id = `document-properties-color-input-${DocumentPropertiesWidget.idCounter++}`;
+		colorInput.id = `${toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
 		backgroundColorLabel.htmlFor = colorInput.id;
 
 		backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
@@ -115,7 +117,7 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 			label.innerText = labelContent;
 			input.type = 'number';
 			input.min = '0';
-			input.id = `document-properties-dimension-row-${DocumentPropertiesWidget.idCounter++}`;
+			input.id = `${toolbarCSSPrefix}docPropertiesDimensionRow-${DocumentPropertiesWidget.idCounter++}`;
 			label.htmlFor = input.id;
 
 			spacer.style.flexGrow = '1';

package/src/toolbar/widgets/PenToolWidget.ts

@@ -134,6 +134,7 @@ export default class PenToolWidget extends BaseToolWidget {
 	private static idCounter: number = 0;
 	protected fillDropdown(dropdown: HTMLElement): boolean {
 		const container = document.createElement('div');
+		container.classList.add(`${toolbarCSSPrefix}spacedList`);
 
 		const thicknessRow = document.createElement('div');
 		const objectTypeRow = document.createElement('div');

package/src/toolbar/widgets/TextToolWidget.ts

@@ -32,6 +32,8 @@ export default class TextToolWidget extends BaseToolWidget {
 
 	private static idCounter: number = 0;
 	protected fillDropdown(dropdown: HTMLElement): boolean {
+		const container = document.createElement('div');
+		container.classList.add(`${toolbarCSSPrefix}spacedList`);
 		const fontRow = document.createElement('div');
 		const colorRow = document.createElement('div');
 		const sizeRow = document.createElement('div');
@@ -108,7 +110,8 @@ export default class TextToolWidget extends BaseToolWidget {
 		};
 		this.updateDropdownInputs();
 
-		dropdown.replaceChildren(colorRow, sizeRow, fontRow);
+		container.replaceChildren(colorRow, sizeRow, fontRow);
+		dropdown.appendChild(container);
 		return true;
 	}