js-draw 1.17.0 → 1.19.1

package/dist/mjs/testing/sendKeyPressRelease.mjs

@@ -0,0 +1,6 @@
+import  { InputEvtType }  from '../inputEvents.mjs';
+const sendKeyPressRelease = (editor, key) => {
+    editor.sendKeyboardEvent(InputEvtType.KeyPressEvent, key);
+    editor.sendKeyboardEvent(InputEvtType.KeyUpEvent, key);
+};
+export default sendKeyPressRelease;

package/dist/mjs/testing/sendPenEvent.d.ts

@@ -1,6 +1,6 @@
 import Editor from '../Editor';
 import { Point2 } from '@js-draw/math';
-import Pointer from '../Pointer';
+import Pointer, { PointerDevice } from '../Pointer';
 import { InputEvtType } from '../inputEvents';
 /**
  * Dispatch a pen event to the currently selected tool.
@@ -8,5 +8,5 @@ import { InputEvtType } from '../inputEvents';
  *
  * @see {@link sendTouchEvent}
  */
-declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]) => Pointer;
+declare const sendPenEvent: (editor: Editor, eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[], deviceType?: PointerDevice) => Pointer;
 export default sendPenEvent;

package/dist/mjs/testing/sendPenEvent.mjs

@@ -1,4 +1,4 @@
-import  Pointer  from '../Pointer.mjs';
+import  Pointer, { PointerDevice }  from '../Pointer.mjs';
 import  { InputEvtType }  from '../inputEvents.mjs';
 import  getUniquePointerId  from './getUniquePointerId.mjs';
 /**
@@ -7,9 +7,9 @@ import  getUniquePointerId  from './getUniquePointerId.mjs';
  *
  * @see {@link sendTouchEvent}
  */
-const sendPenEvent = (editor, eventType, point, allPointers) => {
+const sendPenEvent = (editor, eventType, point, allPointers, deviceType = PointerDevice.Pen) => {
     const id = getUniquePointerId(allPointers ?? []);
-    const mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, editor.viewport, id);
+    const mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, editor.viewport, id, deviceType);
     editor.toolController.dispatchInputEvent({
         kind: eventType,
         allPointers: allPointers ?? [

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

@@ -1,6 +1,7 @@
 import { Color4 } from '@js-draw/math';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
 import { PenStyle } from '../tools/Pen';
+import { EraserMode } from '../tools/Eraser';
 export type IconElemType = HTMLImageElement | SVGElement;
 /**
  * Provides icons that can be used in the toolbar and other locations.
@@ -39,7 +40,7 @@ export default class IconProvider {
     makeUndoIcon(): IconElemType;
     makeRedoIcon(): IconElemType;
     makeDropdownIcon(): IconElemType;
-    makeEraserIcon(eraserSize?: number): IconElemType;
+    makeEraserIcon(eraserSize?: number, mode?: EraserMode): IconElemType;
     makeSelectionIcon(): IconElemType;
     makeRotateIcon(): IconElemType;
     makeHandToolIcon(): IconElemType;
@@ -88,6 +89,7 @@ export default class IconProvider {
      * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
      */
     protected isRoundedTipPen(penStyle: PenStyle): boolean;
+    protected isPolylinePen(penStyle: PenStyle): boolean;
     /** Must be overridden by icon packs that need attribution. */
     licenseInfo(): string | null;
 }

package/dist/mjs/toolbar/IconProvider.mjs

@@ -8,6 +8,8 @@ import { Vec2, Color4 } from '@js-draw/math';
 import  SVGRenderer  from '../rendering/renderers/SVGRenderer.mjs';
 import  Viewport  from '../Viewport.mjs';
 import  { makeFreehandLineBuilder }  from '../components/builders/FreehandLineBuilder.mjs';
+import  { makePolylineBuilder }  from '../components/builders/PolylineBuilder.mjs';
+import  { EraserMode }  from '../tools/Eraser.mjs';
 const svgNamespace = 'http://www.w3.org/2000/svg';
 const iconColorFill = `
 	style='fill: var(--icon-color);'
@@ -112,16 +114,23 @@ class IconProvider {
         icon.setAttribute('viewBox', '-10 -10 110 110');
         return icon;
     }
-    makeEraserIcon(eraserSize) {
+    makeEraserIcon(eraserSize, mode) {
         const icon = document.createElementNS(svgNamespace, 'svg');
         eraserSize ??= 10;
         const scaledSize = eraserSize / 4;
         const eraserColor = '#ff70af';
         // Draw an eraser-like shape. Created with Inkscape
         icon.innerHTML = `
+		<defs>
+			<linearGradient id="dash-pattern">
+				<stop offset="80%" stop-color="${eraserColor}"/>
+				<stop offset="85%" stop-color="white"/>
+				<stop offset="90%" stop-color="${eraserColor}"/>
+			</linearGradient>
+		</defs>
 		<g>
 			<path
-				style="fill:${eraserColor}"
+				style="fill:${mode === EraserMode.PartialStroke ? 'url(#dash-pattern)' : eraserColor}"
 				stroke="black"
 				transform="rotate(41.35)"
 				d="M 52.5 27
@@ -835,7 +844,10 @@ class IconProvider {
      * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
      */
     isRoundedTipPen(penStyle) {
-        return penStyle.factory === makeFreehandLineBuilder;
+        return penStyle.factory === makeFreehandLineBuilder || penStyle.factory === makePolylineBuilder;
+    }
+    isPolylinePen(penStyle) {
+        return penStyle.factory === makePolylineBuilder;
     }
     /** Must be overridden by icon packs that need attribution. */
     licenseInfo() { return null; }

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

@@ -17,9 +17,11 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     dragAndDropHereOrBrowse: string;
     cancel: string;
     submit: string;
+    addAll: string;
     roundedTipPen: string;
+    roundedTipPen2: string;
     flatTipPen: string;
-    selectPenTip: string;
+    selectPenType: string;
     selectShape: string;
     colorLabel: string;
     pen: string;
@@ -30,6 +32,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     resizeImageToSelection: string;
     deleteSelection: string;
     duplicateSelection: string;
+    fullStrokeEraser: string;
     pickColorFromScreen: string;
     clickToPickColorAnnouncement: string;
     colorSelectionCanceledAnnouncement: string;
@@ -54,6 +57,7 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     strokeAutocorrect: string;
     errorImageHasZeroSize: string;
     describeTheImage: string;
+    fileInput__loading: string;
     penDropdown__baseHelpText: string;
     penDropdown__colorHelpText: string;
     penDropdown__thicknessHelpText: string;
@@ -66,7 +70,10 @@ export interface ToolbarLocalization extends ToolbarUtilsLocalization {
     handDropdown__zoomOutHelpText: string;
     handDropdown__resetViewHelpText: string;
     handDropdown__touchPanningHelpText: string;
+    eraserDropdown__baseHelpText: string;
+    eraserDropdown__fullStrokeEraserHelpText: string;
     handDropdown__lockRotationHelpText: string;
+    eraserDropdown__thicknessHelpText: string;
     selectionDropdown__baseHelpText: string;
     selectionDropdown__resizeToHelpText: string;
     selectionDropdown__deleteHelpText: string;

package/dist/mjs/toolbar/localization.mjs

@@ -14,6 +14,7 @@ export const defaultToolbarLocalization = {
     chooseFile: 'Choose file',
     dragAndDropHereOrBrowse: 'Drag and drop here\nor\n{{browse}}',
     submit: 'Submit',
+    addAll: 'Add all',
     cancel: 'Cancel',
     resetView: 'Reset view',
     thicknessLabel: 'Thickness',
@@ -27,7 +28,8 @@ export const defaultToolbarLocalization = {
     save: 'Save',
     undo: 'Undo',
     redo: 'Redo',
-    selectPenTip: 'Pen tip',
+    fullStrokeEraser: 'Full stroke eraser',
+    selectPenType: 'Pen type',
     selectShape: 'Shape',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
@@ -45,6 +47,7 @@ export const defaultToolbarLocalization = {
     strokeAutocorrect: 'Autocorrect',
     touchPanning: 'Touchscreen panning',
     roundedTipPen: 'Round',
+    roundedTipPen2: 'Polyline',
     flatTipPen: 'Flat',
     arrowPen: 'Arrow',
     linePen: 'Line',
@@ -55,11 +58,12 @@ export const defaultToolbarLocalization = {
     paste: 'Paste',
     errorImageHasZeroSize: 'Error: Image has zero size',
     describeTheImage: 'Image description',
+    fileInput__loading: 'Loading...',
     // Help text
     penDropdown__baseHelpText: 'This tool draws shapes or freehand lines.',
     penDropdown__colorHelpText: 'Changes the pen\'s color',
     penDropdown__thicknessHelpText: 'Changes the thickness of strokes drawn by the pen.',
-    penDropdown__penTypeHelpText: 'Changes the pen style.\n\nEither a “pen tip” style or “shape” can be chosen. Choosing a “pen tip” style draws freehand lines. Choosing a “shape” draws shapes.',
+    penDropdown__penTypeHelpText: 'Changes the pen style.\n\nEither a “pen” style or “shape” can be chosen. Choosing a “pen” style draws freehand lines. Choosing a “shape” draws shapes.',
     penDropdown__autocorrectHelpText: 'Converts approximate freehand lines and rectangles to perfect ones.\n\nThe pen must be held stationary at the end of a stroke to trigger a correction.',
     penDropdown__stabilizationHelpText: 'Draws smoother strokes.\n\nThis also adds a short delay between the mouse/stylus and the stroke.',
     handDropdown__baseHelpText: 'This tool is responsible for scrolling, rotating, and zooming the editor.',
@@ -69,6 +73,9 @@ export const defaultToolbarLocalization = {
     handDropdown__zoomDisplayHelpText: 'Shows the current zoom level. 100% shows the image at its actual size.',
     handDropdown__touchPanningHelpText: 'When enabled, touch gestures move the image rather than select or draw.',
     handDropdown__lockRotationHelpText: 'When enabled, prevents touch gestures from rotating the screen.',
+    eraserDropdown__baseHelpText: 'This tool removes strokes, images, and text under the cursor.',
+    eraserDropdown__thicknessHelpText: 'Changes the size of the eraser.',
+    eraserDropdown__fullStrokeEraserHelpText: 'When in full-stroke mode, entire shapes are erased.\n\nWhen not in full-stroke mode, shapes can be partially erased.',
     selectionDropdown__baseHelpText: 'Selects content and manipulates the selection',
     selectionDropdown__resizeToHelpText: 'Crops the drawing to the size of what\'s currently selected.\n\nIf auto-resize is enabled, it will be disabled.',
     selectionDropdown__deleteHelpText: 'Erases selected items.',

package/dist/mjs/toolbar/widgets/BaseWidget.d.ts

@@ -126,6 +126,7 @@ export default abstract class BaseWidget {
     setHidden(hidden: boolean): void;
     /** Set whether the widget is contained within another. @internal */
     setIsToplevel(toplevel: boolean): void;
+    /** Returns true if the menu for this widget is open. */
     protected isDropdownVisible(): boolean;
     protected isSelected(): boolean;
     private createDropdownIcon;

package/dist/mjs/toolbar/widgets/BaseWidget.mjs

@@ -399,6 +399,7 @@ class BaseWidget {
     setIsToplevel(toplevel) {
         this.toplevel = toplevel;
     }
+    /** Returns true if the menu for this widget is open. */
     isDropdownVisible() {
         return this.dropdown?.visible?.get() ?? false;
     }

package/dist/mjs/toolbar/widgets/EraserToolWidget.d.ts

@@ -1,15 +1,20 @@
 import Editor from '../../Editor';
 import Eraser from '../../tools/Eraser';
 import { ToolbarLocalization } from '../localization';
+import HelpDisplay from '../utils/HelpDisplay';
 import BaseToolWidget from './BaseToolWidget';
 import { SavedToolbuttonState } from './BaseWidget';
 export default class EraserToolWidget extends BaseToolWidget {
     private tool;
     private updateInputs;
     constructor(editor: Editor, tool: Eraser, localizationTable?: ToolbarLocalization);
+    protected getHelpText(): string;
     protected getTitle(): string;
+    private makeIconForType;
     protected createIcon(): Element;
-    protected fillDropdown(dropdown: HTMLElement): boolean;
+    private static idCounter;
+    private makeEraserTypeSelector;
+    protected fillDropdown(dropdown: HTMLElement, helpDisplay?: HelpDisplay): boolean;
     serializeState(): SavedToolbuttonState;
     deserializeFrom(state: SavedToolbuttonState): void;
 }

package/dist/mjs/toolbar/widgets/EraserToolWidget.mjs

@@ -1,8 +1,9 @@
+import  { EraserMode }  from '../../tools/Eraser.mjs';
 import  { EditorEventType }  from '../../types.mjs';
 import  { toolbarCSSPrefix }  from '../constants.mjs';
 import  BaseToolWidget  from './BaseToolWidget.mjs';
 import  makeThicknessSlider  from './components/makeThicknessSlider.mjs';
-export default class EraserToolWidget extends BaseToolWidget {
+class EraserToolWidget extends BaseToolWidget {
     constructor(editor, tool, localizationTable) {
         super(editor, tool, 'eraser-tool-widget', localizationTable);
         this.tool = tool;
@@ -14,26 +15,57 @@ export default class EraserToolWidget extends BaseToolWidget {
             }
         });
     }
+    getHelpText() {
+        return this.localizationTable.eraserDropdown__baseHelpText;
+    }
     getTitle() {
         return this.localizationTable.eraser;
     }
+    makeIconForType(mode) {
+        return this.editor.icons.makeEraserIcon(this.tool.getThickness(), mode);
+    }
     createIcon() {
-        return this.editor.icons.makeEraserIcon(this.tool.getThickness());
+        return this.makeIconForType(this.tool.getModeValue().get());
+    }
+    makeEraserTypeSelector(helpDisplay) {
+        const container = document.createElement('div');
+        const labelElement = document.createElement('label');
+        const checkboxElement = document.createElement('input');
+        checkboxElement.id = `${toolbarCSSPrefix}eraserToolWidget-${EraserToolWidget.idCounter++}`;
+        labelElement.htmlFor = checkboxElement.id;
+        labelElement.innerText = this.localizationTable.fullStrokeEraser;
+        checkboxElement.type = 'checkbox';
+        checkboxElement.oninput = () => {
+            this.tool.getModeValue().set(checkboxElement.checked ? EraserMode.FullStroke : EraserMode.PartialStroke);
+        };
+        const updateValue = () => {
+            checkboxElement.checked = this.tool.getModeValue().get() === EraserMode.FullStroke;
+        };
+        container.replaceChildren(labelElement, checkboxElement);
+        helpDisplay?.registerTextHelpForElement(container, this.localizationTable.eraserDropdown__fullStrokeEraserHelpText);
+        return {
+            addTo: (parent) => {
+                parent.appendChild(container);
+            },
+            updateValue,
+        };
     }
-    fillDropdown(dropdown) {
+    fillDropdown(dropdown, helpDisplay) {
         const container = document.createElement('div');
         container.classList.add(`${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
         const thicknessSlider = makeThicknessSlider(this.editor, thickness => {
             this.tool.setThickness(thickness);
         });
         thicknessSlider.setBounds(10, 55);
+        helpDisplay?.registerTextHelpForElement(thicknessSlider.container, this.localizationTable.eraserDropdown__thicknessHelpText);
+        const modeSelector = this.makeEraserTypeSelector(helpDisplay);
         this.updateInputs = () => {
             thicknessSlider.setValue(this.tool.getThickness());
+            modeSelector.updateValue();
         };
         this.updateInputs();
-        const spacer = document.createElement('div');
-        spacer.style.height = '5px';
-        container.replaceChildren(thicknessSlider.container, spacer);
+        container.replaceChildren(thicknessSlider.container);
+        modeSelector.addTo(container);
         dropdown.replaceChildren(container);
         return true;
     }
@@ -41,6 +73,7 @@ export default class EraserToolWidget extends BaseToolWidget {
         return {
             ...super.serializeState(),
             thickness: this.tool.getThickness(),
+            mode: this.tool.getModeValue().get(),
         };
     }
     deserializeFrom(state) {
@@ -52,5 +85,13 @@ export default class EraserToolWidget extends BaseToolWidget {
             }
             this.tool.setThickness(parsedThickness);
         }
+        if (state.mode) {
+            const mode = state.mode;
+            if (Object.values(EraserMode).includes(mode)) {
+                this.tool.getModeValue().set(mode);
+            }
+        }
     }
 }
+EraserToolWidget.idCounter = 0;
+export default EraserToolWidget;

package/dist/mjs/toolbar/widgets/InsertImageWidget/ImageWrapper.d.ts

@@ -0,0 +1,22 @@
+import { RenderableImage } from 'js-draw/src/rendering/renderers/AbstractRenderer';
+/** Handles filtering and other operations on an image. */
+export declare class ImageWrapper {
+    private imageBase64Url;
+    private preview;
+    private onUrlUpdate;
+    private readonly originalSrc;
+    private altText;
+    private constructor();
+    private updateImageData;
+    decreaseSize(resizeFactor?: number): void;
+    reset(): void;
+    isChanged(): boolean;
+    getBase64Url(): string;
+    getAltText(): string;
+    setAltText(text: string): void;
+    static fromSrcAndPreview(initialBase64Src: string, preview: HTMLImageElement, onUrlUpdate: () => void): ImageWrapper;
+    static fromRenderable(renderable: RenderableImage, onUrlUpdate: () => void): {
+        wrapper: ImageWrapper;
+        preview: HTMLImageElement;
+    };
+}

package/dist/mjs/toolbar/widgets/InsertImageWidget/ImageWrapper.mjs

@@ -0,0 +1,54 @@
+/** Handles filtering and other operations on an image. */
+export class ImageWrapper {
+    constructor(imageBase64Url, preview, onUrlUpdate) {
+        this.imageBase64Url = imageBase64Url;
+        this.preview = preview;
+        this.onUrlUpdate = onUrlUpdate;
+        this.originalSrc = imageBase64Url;
+        preview.src = imageBase64Url;
+    }
+    updateImageData(base64DataUrl) {
+        this.preview.src = base64DataUrl;
+        this.imageBase64Url = base64DataUrl;
+        this.onUrlUpdate();
+    }
+    decreaseSize(resizeFactor = 3 / 4) {
+        const canvas = document.createElement('canvas');
+        canvas.width = this.preview.naturalWidth * resizeFactor;
+        canvas.height = this.preview.naturalHeight * resizeFactor;
+        const ctx = canvas.getContext('2d');
+        ctx?.drawImage(this.preview, 0, 0, canvas.width, canvas.height);
+        // JPEG can be much smaller than PNG for the same image size. Prefer it if
+        // the image is already a JPEG.
+        const format = this.originalSrc?.startsWith('data:image/jpeg;') ? 'image/jpeg' : 'image/png';
+        this.updateImageData(canvas.toDataURL(format));
+    }
+    reset() {
+        this.updateImageData(this.originalSrc);
+    }
+    isChanged() {
+        return this.imageBase64Url !== this.originalSrc;
+    }
+    getBase64Url() {
+        return this.imageBase64Url;
+    }
+    getAltText() {
+        return this.altText;
+    }
+    setAltText(text) {
+        this.altText = text;
+    }
+    static fromSrcAndPreview(initialBase64Src, preview, onUrlUpdate) {
+        return new ImageWrapper(initialBase64Src, preview, onUrlUpdate);
+    }
+    static fromRenderable(renderable, onUrlUpdate) {
+        const preview = new Image();
+        preview.src = renderable.base64Url;
+        const result = new ImageWrapper(renderable.base64Url, preview, onUrlUpdate);
+        const altText = renderable.label ?? renderable.image.getAttribute('alt');
+        if (altText) {
+            result.setAltText(altText);
+        }
+        return { wrapper: result, preview };
+    }
+}

package/dist/mjs/toolbar/widgets/InsertImageWidget/fileToImages.d.ts

@@ -0,0 +1,3 @@
+import type { RenderableImage } from '../../../rendering/renderers/AbstractRenderer';
+declare const fileToImages: (imageFile: File) => Promise<RenderableImage[]>;
+export default fileToImages;

package/dist/mjs/toolbar/widgets/InsertImageWidget/fileToImages.mjs

@@ -0,0 +1,16 @@
+import  fileToBase64Url  from '../../../util/fileToBase64Url.mjs';
+import { Mat33 } from '@js-draw/math';
+const fileToImages = async (imageFile) => {
+    const result = [];
+    const imageElement = new Image();
+    const base64Url = await fileToBase64Url(imageFile);
+    if (base64Url) {
+        result.push({
+            image: imageElement,
+            base64Url: base64Url,
+            transform: Mat33.identity,
+        });
+    }
+    return result;
+};
+export default fileToImages;

package/dist/mjs/toolbar/widgets/InsertImageWidget/index.d.ts

@@ -0,0 +1,37 @@
+import Editor from '../../../Editor';
+import { ToolbarLocalization } from '../../localization';
+import BaseWidget from '../BaseWidget';
+/**
+ * Provides a widget that allows inserting or modifying raster images.
+ *
+ * It's possible to customize the file picker used by this widget through {@link EditorSettings.image}.
+ *
+ * @example
+ * ```ts,runnable
+ * import { Editor, makeEdgeToolbar, InsertImageWidget } from 'js-draw';
+ *
+ * const editor = new Editor(document.body);
+ * const toolbar = makeEdgeToolbar(editor);
+ *
+ * toolbar.addWidget(new InsertImageWidget(editor));
+ * ```
+ */
+export default class InsertImageWidget extends BaseWidget {
+    private images;
+    private imagesPreview;
+    private selectedFiles;
+    private imageAltTextInput;
+    private statusView;
+    private submitButton;
+    constructor(editor: Editor, localization?: ToolbarLocalization);
+    protected getTitle(): string;
+    protected createIcon(): Element | null;
+    protected setDropdownVisible(visible: boolean): void;
+    protected handleClick(): void;
+    private static nextInputId;
+    protected fillDropdown(dropdown: HTMLElement): boolean;
+    private onImageDataUpdate;
+    private hideDialog;
+    private updateImageSizeDisplay;
+    private updateInputs;
+}