js-draw 1.18.0 → 1.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-draw",
-  "version": "1.18.0",
+  "version": "1.19.1",
   "description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
   "types": "./dist/mjs/lib.d.ts",
   "main": "./dist/cjs/lib.js",
@@ -64,11 +64,11 @@
     "postpack": "ts-node tools/copyREADME.ts revert"
   },
   "dependencies": {
-    "@js-draw/math": "^1.18.0",
+    "@js-draw/math": "^1.19.0",
     "@melloware/coloris": "0.22.0"
   },
   "devDependencies": {
-    "@js-draw/build-tool": "^1.17.0",
+    "@js-draw/build-tool": "^1.19.0",
     "@types/jest": "29.5.5",
     "@types/jsdom": "21.1.3"
   },
@@ -86,5 +86,5 @@
     "freehand",
     "svg"
   ],
-  "gitHead": "73c0d802a8439b5d408ba1e60f91be029db7e402"
+  "gitHead": "50fa44a2bb68b93d24efea433760a5e45c56293f"
 }

package/src/toolbar/toolbar.scss

@@ -1,10 +1,4 @@
-@use "./widgets/InsertImageWidget.scss";
-@use "./widgets/OverflowWidget.css";
-@use "./widgets/PenToolWidget.scss";
-@use "./widgets/HandToolWidget.scss";
-@use "./widgets/SelectionToolWidget.scss";
-@use "./widgets/DocumentPropertiesWidget.scss";
-@use "./widgets/components/components.scss";
+@use "./widgets/widgets.scss";
 
 @use "./AbstractToolbar.scss";
 @use "./EdgeToolbar.scss";

package/src/toolbar/widgets/{InsertImageWidget.scss → InsertImageWidget/index.scss}

@@ -11,8 +11,8 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 	}
 
 	img {
-		max-width: min(50vw, 75%);
-		max-height: min(300px, 50vh);
+		max-width: 100%;
+		max-height: 100%;
 	
 		/* Center */
 		display: block;
@@ -23,6 +23,7 @@ $image-widget-selector: '.insert-image-widget-dropdown-content';
 	.insert-image-image-status-view {
 		display: flex;
 		justify-content: space-between;
+		padding-bottom: 0;
 	}
 
 	.action-button-row {

package/src/toolbar/widgets/components/components.scss

@@ -2,4 +2,5 @@
 @use "./makeColorInput.scss";
 @use "./makeSeparator.scss";
 @use "./makeFileInput.scss";
-@use "./makeGridSelector.scss";
+@use "./makeGridSelector.scss";
+@use "./makeSnappedList.scss";

package/src/toolbar/widgets/components/makeFileInput.scss

@@ -2,7 +2,11 @@
 .toolbar-element .toolbar--file-input-container {
 	display: flex;
 
-	> input[type="file"] {
+	&.-loading {
+		opacity: 0.8;
+	}
+
+	> input.file-input {
 		// Hide in a way such that screen readers can still access the
 		// input.
 		opacity: 0;
@@ -11,6 +15,11 @@
 		min-width: 0 !important;
 		max-width: 0;
 		height: 0;
+
+		// Needed when the input is a button.
+		overflow: hidden;
+		padding: 0;
+		margin: 0;
 	}
 
 	> label {
@@ -28,6 +37,10 @@
 			in srgb, var(--foreground-color-1), transparent
 		);
 
+		> .cancel-button {
+			display: block;
+		}
+
 		> .toolbar--file-input-description {
 			background-color: var(--background-color-3);
 			color: var(--foreground-color-3);

package/src/toolbar/widgets/components/makeSnappedList.scss

@@ -0,0 +1,28 @@
+
+// Repeat for specificity.
+// TODO(v2): Refactor everything to use RCSS.
+:root .toolbar-snapped-scroll-list.toolbar-snapped-scroll-list.toolbar-snapped-scroll-list {
+	overflow-y: auto;
+	scroll-snap-type: y mandatory;
+	height: min(200px, 50vh);
+	display: flex;
+	flex-direction: column;
+
+	> .item {
+		height: 100%;
+		width: 100%;
+		flex-shrink: 0;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		scroll-snap-align: start;
+		scroll-snap-stop: always;
+		box-sizing: border-box;
+	}
+
+	&.-empty {
+		display: none;
+	}
+}

package/src/toolbar/widgets/widgets.scss

@@ -0,0 +1,7 @@
+@use "./InsertImageWidget/index.scss";
+@use "./OverflowWidget.css";
+@use "./PenToolWidget.scss";
+@use "./HandToolWidget.scss";
+@use "./SelectionToolWidget.scss";
+@use "./DocumentPropertiesWidget.scss";
+@use "./components/components.scss";

package/dist/cjs/toolbar/widgets/InsertImageWidget.d.ts

@@ -1,22 +0,0 @@
-import Editor from '../../Editor';
-import { ToolbarLocalization } from '../localization';
-import BaseWidget from './BaseWidget';
-export default class InsertImageWidget extends BaseWidget {
-    private imagePreview;
-    private image;
-    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;
-}

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

@@ -1,269 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const ImageComponent_1 = __importDefault(require("../../components/ImageComponent"));
-const Erase_1 = __importDefault(require("../../commands/Erase"));
-const EditorImage_1 = __importDefault(require("../../image/EditorImage"));
-const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
-const SelectionTool_1 = __importDefault(require("../../tools/SelectionTool/SelectionTool"));
-const math_1 = require("@js-draw/math");
-const fileToBase64Url_1 = __importDefault(require("../../util/fileToBase64Url"));
-const BaseWidget_1 = __importDefault(require("./BaseWidget"));
-const types_1 = require("../../types");
-const constants_1 = require("../constants");
-const makeFileInput_1 = __importDefault(require("./components/makeFileInput"));
-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;
-    }
-    static fromSrcAndPreview(initialBase64Src, preview, onUrlUpdate) {
-        return new ImageWrapper(initialBase64Src, preview, onUrlUpdate);
-    }
-}
-class InsertImageWidget extends BaseWidget_1.default {
-    constructor(editor, localization) {
-        localization ??= editor.localization;
-        super(editor, 'insert-image-widget', localization);
-        this.image = null;
-        // Make the dropdown showable
-        this.container.classList.add('dropdownShowable');
-        editor.notifier.on(types_1.EditorEventType.SelectionUpdated, event => {
-            if (event.kind === types_1.EditorEventType.SelectionUpdated && this.isDropdownVisible()) {
-                this.updateInputs();
-            }
-        });
-    }
-    getTitle() {
-        return this.localizationTable.image;
-    }
-    createIcon() {
-        return this.editor.icons.makeInsertImageIcon();
-    }
-    setDropdownVisible(visible) {
-        super.setDropdownVisible(visible);
-        // Update the dropdown just before showing.
-        if (this.isDropdownVisible()) {
-            this.updateInputs();
-        }
-    }
-    handleClick() {
-        this.setDropdownVisible(!this.isDropdownVisible());
-    }
-    fillDropdown(dropdown) {
-        const container = document.createElement('div');
-        container.classList.add('insert-image-widget-dropdown-content', `${constants_1.toolbarCSSPrefix}spacedList`, `${constants_1.toolbarCSSPrefix}nonbutton-controls-main-list`);
-        const { container: chooseImageRow, selectedFiles, } = (0, makeFileInput_1.default)(this.localizationTable.chooseFile, this.editor, 'image/*');
-        const altTextRow = document.createElement('div');
-        this.imagePreview = document.createElement('img');
-        this.statusView = document.createElement('div');
-        const actionButtonRow = document.createElement('div');
-        actionButtonRow.classList.add('action-button-row');
-        this.statusView.classList.add('insert-image-image-status-view');
-        this.submitButton = document.createElement('button');
-        this.selectedFiles = selectedFiles;
-        this.imageAltTextInput = document.createElement('input');
-        // Label the alt text input
-        const imageAltTextLabel = document.createElement('label');
-        const altTextInputId = `insert-image-alt-text-input-${InsertImageWidget.nextInputId++}`;
-        this.imageAltTextInput.setAttribute('id', altTextInputId);
-        imageAltTextLabel.htmlFor = altTextInputId;
-        imageAltTextLabel.innerText = this.localizationTable.inputAltText;
-        this.imageAltTextInput.type = 'text';
-        this.imageAltTextInput.placeholder = this.localizationTable.describeTheImage;
-        this.statusView.setAttribute('aria-live', 'polite');
-        this.submitButton.innerText = this.localizationTable.submit;
-        this.selectedFiles.onUpdateAndNow(async (files) => {
-            if (files.length === 0) {
-                this.image = null;
-                this.onImageDataUpdate();
-                return;
-            }
-            this.imagePreview.style.display = 'block';
-            const image = files[0];
-            let data = null;
-            let errorMessage = null;
-            try {
-                data = await (0, fileToBase64Url_1.default)(image);
-            }
-            catch (error) {
-                console.error('Image load error', error);
-                errorMessage = this.localizationTable.imageLoadError(error);
-            }
-            if (data) {
-                this.image = ImageWrapper.fromSrcAndPreview(data, this.imagePreview, () => this.onImageDataUpdate());
-            }
-            else {
-                this.image = null;
-            }
-            this.onImageDataUpdate();
-            // Show the error after image update callbacks to ensure it is
-            // actually shown.
-            if (errorMessage) {
-                this.statusView.innerText = errorMessage;
-            }
-        });
-        altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
-        actionButtonRow.replaceChildren(this.submitButton);
-        container.replaceChildren(chooseImageRow, altTextRow, this.imagePreview, this.statusView, actionButtonRow);
-        dropdown.replaceChildren(container);
-        return true;
-    }
-    onImageDataUpdate() {
-        const base64Data = this.image?.getBase64Url();
-        if (base64Data) {
-            this.submitButton.disabled = false;
-            this.submitButton.style.display = '';
-            this.imagePreview.style.display = '';
-            this.updateImageSizeDisplay();
-        }
-        else {
-            this.submitButton.disabled = true;
-            this.submitButton.style.display = 'none';
-            this.statusView.innerText = '';
-            this.imagePreview.style.display = 'none';
-            this.submitButton.disabled = true;
-        }
-    }
-    hideDialog() {
-        this.setDropdownVisible(false);
-    }
-    updateImageSizeDisplay() {
-        const imageData = this.image?.getBase64Url() ?? '';
-        const sizeInKiB = imageData.length / 1024;
-        const sizeInMiB = sizeInKiB / 1024;
-        let units = 'KiB';
-        let size = sizeInKiB;
-        if (sizeInMiB >= 1) {
-            size = sizeInMiB;
-            units = 'MiB';
-        }
-        const sizeText = document.createElement('span');
-        sizeText.innerText = this.localizationTable.imageSize(Math.round(size), units);
-        // Add a button to allow decreasing the size of large images.
-        const decreaseSizeButton = document.createElement('button');
-        decreaseSizeButton.innerText = this.localizationTable.decreaseImageSize;
-        decreaseSizeButton.onclick = () => {
-            this.image?.decreaseSize();
-        };
-        const resetSizeButton = document.createElement('button');
-        resetSizeButton.innerText = this.localizationTable.resetImage;
-        resetSizeButton.onclick = () => {
-            this.image?.reset();
-        };
-        this.statusView.replaceChildren(sizeText);
-        const largeImageThreshold = 0.12; // MiB
-        if (sizeInMiB > largeImageThreshold) {
-            this.statusView.appendChild(decreaseSizeButton);
-        }
-        else if (this.image?.isChanged()) {
-            this.statusView.appendChild(resetSizeButton);
-        }
-    }
-    updateInputs() {
-        const resetInputs = () => {
-            this.selectedFiles?.set([]);
-            this.imageAltTextInput.value = '';
-            this.imagePreview.style.display = 'none';
-            this.submitButton.disabled = true;
-            this.statusView.innerText = '';
-            this.submitButton.style.display = '';
-            this.imageAltTextInput.oninput = null;
-        };
-        resetInputs();
-        const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool_1.default);
-        const selectedObjects = selectionTools.map(tool => tool.getSelectedObjects()).flat();
-        // Check: Is there a selected image that can be edited?
-        let editingImage = null;
-        if (selectedObjects.length === 1 && selectedObjects[0] instanceof ImageComponent_1.default) {
-            editingImage = selectedObjects[0];
-            this.imageAltTextInput.value = editingImage.getAltText() ?? '';
-            this.image = ImageWrapper.fromSrcAndPreview(editingImage.getURL(), this.imagePreview, () => this.onImageDataUpdate());
-            this.onImageDataUpdate();
-        }
-        else if (selectedObjects.length > 0) {
-            // If not, clear the selection.
-            selectionTools.forEach(tool => tool.clearSelection());
-        }
-        // Show the submit button only when there is data to submit.
-        this.submitButton.style.display = 'none';
-        this.imageAltTextInput.oninput = () => {
-            if (this.imagePreview.src?.length > 0) {
-                this.submitButton.style.display = '';
-            }
-        };
-        this.submitButton.onclick = async () => {
-            if (!this.image) {
-                return;
-            }
-            const image = new Image();
-            image.src = this.image.getBase64Url();
-            image.setAttribute('alt', this.imageAltTextInput.value);
-            let component;
-            try {
-                component = await ImageComponent_1.default.fromImage(image, math_1.Mat33.identity);
-            }
-            catch (error) {
-                console.error('Error loading image', error);
-                this.statusView.innerText = this.localizationTable.imageLoadError(error);
-                return;
-            }
-            if (component.getBBox().area === 0) {
-                this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
-                return;
-            }
-            this.hideDialog();
-            if (editingImage) {
-                const eraseCommand = new Erase_1.default([editingImage]);
-                // Try to preserve the original width
-                const originalTransform = editingImage.getTransformation();
-                // || 1: Prevent division by zero
-                const originalWidth = editingImage.getBBox().width || 1;
-                const newWidth = component.getBBox().transformedBoundingBox(originalTransform).width || 1;
-                const widthAdjustTransform = math_1.Mat33.scaling2D(originalWidth / newWidth);
-                await this.editor.dispatch((0, uniteCommands_1.default)([
-                    EditorImage_1.default.addElement(component),
-                    component.transformBy(originalTransform.rightMul(widthAdjustTransform)),
-                    component.setZIndex(editingImage.getZIndex()),
-                    eraseCommand,
-                ]));
-                selectionTools[0]?.setSelection([component]);
-            }
-            else {
-                await this.editor.addAndCenterComponents([component]);
-            }
-        };
-    }
-}
-InsertImageWidget.nextInputId = 0;
-exports.default = InsertImageWidget;

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

@@ -1,22 +0,0 @@
-import Editor from '../../Editor';
-import { ToolbarLocalization } from '../localization';
-import BaseWidget from './BaseWidget';
-export default class InsertImageWidget extends BaseWidget {
-    private imagePreview;
-    private image;
-    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;
-}