js-draw 1.18.0 → 1.20.0

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

@@ -0,0 +1,284 @@
+import  ImageComponent  from '../../../components/ImageComponent.mjs';
+import  Erase  from '../../../commands/Erase.mjs';
+import  EditorImage  from '../../../image/EditorImage.mjs';
+import  uniteCommands  from '../../../commands/uniteCommands.mjs';
+import  SelectionTool  from '../../../tools/SelectionTool/SelectionTool.mjs';
+import { Mat33, Vec2 } from '@js-draw/math';
+import  BaseWidget  from '../BaseWidget.mjs';
+import  { EditorEventType }  from '../../../types.mjs';
+import  { toolbarCSSPrefix }  from '../../constants.mjs';
+import  makeFileInput  from '../components/makeFileInput.mjs';
+import  { MutableReactiveValue }  from '../../../util/ReactiveValue.mjs';
+import  bytesToSizeString  from '../../../util/bytesToSizeString.mjs';
+import  { ImageWrapper }  from './ImageWrapper.mjs';
+import  makeSnappedList  from '../components/makeSnappedList.mjs';
+import  fileToImages  from './fileToImages.mjs';
+/**
+ * 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));
+ * ```
+ */
+class InsertImageWidget extends BaseWidget {
+    constructor(editor, localization) {
+        localization ??= editor.localization;
+        super(editor, 'insert-image-widget', localization);
+        // Make the dropdown showable
+        this.container.classList.add('dropdownShowable');
+        editor.notifier.on(EditorEventType.SelectionUpdated, event => {
+            if (event.kind === EditorEventType.SelectionUpdated && this.isDropdownVisible()) {
+                this.updateInputs();
+            }
+        });
+        this.images = MutableReactiveValue.fromInitialValue([]);
+        this.images.onUpdateAndNow(() => {
+            this.onImageDataUpdate();
+        });
+    }
+    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();
+        }
+        else {
+            // Allow any previously-selected files to be freed.
+            this.selectedFiles?.set([]);
+        }
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
+    }
+    fillDropdown(dropdown) {
+        const container = document.createElement('div');
+        container.classList.add('insert-image-widget-dropdown-content', `${toolbarCSSPrefix}spacedList`, `${toolbarCSSPrefix}nonbutton-controls-main-list`);
+        const { container: chooseImageRow, selectedFiles, } = makeFileInput(this.localizationTable.chooseFile, this.editor, {
+            accepts: 'image/*',
+            allowMultiSelect: true,
+            customPickerAction: this.editor.getCurrentSettings().image?.showImagePicker,
+        });
+        const altTextRow = document.createElement('div');
+        this.imagesPreview = makeSnappedList(this.images);
+        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.imagesPreview.visibleItem.onUpdateAndNow(() => this.onImageDataUpdate());
+        this.imageAltTextInput.oninput = () => {
+            const currentImage = this.imagesPreview.visibleItem.get();
+            if (currentImage) {
+                currentImage.setAltText(this.imageAltTextInput.value);
+                this.submitButton.style.display = '';
+            }
+        };
+        this.selectedFiles.onUpdateAndNow(async (files) => {
+            if (files.length === 0) {
+                this.images.set([]);
+                return;
+            }
+            const previews = (await Promise.all(files.map(async (imageFile) => {
+                let renderableImages;
+                try {
+                    renderableImages = await fileToImages(imageFile);
+                }
+                catch (error) {
+                    console.error('Image load error', error);
+                    const errorMessage = this.localizationTable.imageLoadError(error);
+                    this.statusView.innerText = errorMessage;
+                    return [];
+                }
+                return renderableImages.map(image => {
+                    const { wrapper, preview } = ImageWrapper.fromRenderable(image, () => this.onImageDataUpdate());
+                    return {
+                        data: wrapper,
+                        element: preview,
+                    };
+                });
+            }))).flat();
+            this.images.set(previews);
+        });
+        altTextRow.replaceChildren(imageAltTextLabel, this.imageAltTextInput);
+        actionButtonRow.replaceChildren(this.submitButton);
+        container.replaceChildren(chooseImageRow, altTextRow, this.imagesPreview.container, this.statusView, actionButtonRow);
+        dropdown.replaceChildren(container);
+        return true;
+    }
+    onImageDataUpdate() {
+        if (!this.imagesPreview)
+            return;
+        const currentImage = this.imagesPreview.visibleItem.get();
+        const base64Data = currentImage?.getBase64Url();
+        this.imageAltTextInput.value = currentImage?.getAltText() ?? '';
+        if (base64Data) {
+            this.submitButton.disabled = false;
+            this.submitButton.style.display = '';
+            this.updateImageSizeDisplay();
+        }
+        else {
+            this.submitButton.disabled = true;
+            this.submitButton.style.display = 'none';
+            this.statusView.innerText = '';
+            this.submitButton.disabled = true;
+        }
+        if (this.images.get().length <= 1) {
+            this.submitButton.innerText = this.localizationTable.submit;
+        }
+        else {
+            this.submitButton.innerText = this.localizationTable.addAll;
+        }
+    }
+    hideDialog() {
+        this.setDropdownVisible(false);
+    }
+    updateImageSizeDisplay() {
+        const currentImage = this.imagesPreview.visibleItem.get();
+        const imageData = currentImage?.getBase64Url() ?? '';
+        const { size, units } = bytesToSizeString(imageData.length);
+        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 = () => {
+            currentImage?.decreaseSize();
+        };
+        const resetSizeButton = document.createElement('button');
+        resetSizeButton.innerText = this.localizationTable.resetImage;
+        resetSizeButton.onclick = () => {
+            currentImage?.reset();
+        };
+        this.statusView.replaceChildren(sizeText);
+        if (currentImage?.isLarge()) {
+            this.statusView.appendChild(decreaseSizeButton);
+        }
+        else if (currentImage?.isChanged()) {
+            this.statusView.appendChild(resetSizeButton);
+        }
+        else {
+            const hasLargeOrChangedImages = this.images.get().some(image => image.data?.isChanged() || image.data?.isLarge());
+            if (hasLargeOrChangedImages) {
+                // Still show the button -- prevents the layout from readjusting while
+                // scrolling through the image list
+                decreaseSizeButton.disabled = true;
+                this.statusView.appendChild(decreaseSizeButton);
+            }
+        }
+    }
+    updateInputs() {
+        const resetInputs = () => {
+            this.selectedFiles?.set([]);
+            this.imageAltTextInput.value = '';
+            this.submitButton.disabled = true;
+            this.statusView.innerText = '';
+            this.submitButton.style.display = '';
+        };
+        resetInputs();
+        const selectionTools = this.editor.toolController.getMatchingTools(SelectionTool);
+        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) {
+            editingImage = selectedObjects[0];
+            const image = new Image();
+            const imageWrapper = ImageWrapper.fromSrcAndPreview(editingImage.getURL(), image, () => this.onImageDataUpdate());
+            imageWrapper.setAltText(editingImage.getAltText() ?? '');
+            this.images.set([{ data: imageWrapper, element: image }]);
+        }
+        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.submitButton.onclick = async () => {
+            const newComponents = [];
+            let transform = Mat33.identity;
+            let fullBBox = null;
+            for (const { data: imageWrapper } of this.images.get()) {
+                if (!imageWrapper) {
+                    continue;
+                }
+                const image = new Image();
+                image.src = imageWrapper.getBase64Url();
+                image.setAttribute('alt', this.imageAltTextInput.value);
+                let component;
+                try {
+                    component = await ImageComponent.fromImage(image, transform);
+                }
+                catch (error) {
+                    console.error('Error loading image', error);
+                    this.statusView.innerText = this.localizationTable.imageLoadError(error);
+                    return;
+                }
+                const componentBBox = component.getBBox();
+                if (componentBBox.area === 0) {
+                    this.statusView.innerText = this.localizationTable.errorImageHasZeroSize;
+                    return;
+                }
+                newComponents.push(component);
+                fullBBox ??= componentBBox;
+                fullBBox.union(componentBBox);
+                // Update the transform for the next item.
+                const shift = Vec2.of(0, componentBBox.height);
+                transform = transform.rightMul(Mat33.translation(shift));
+            }
+            if (newComponents.length) {
+                if (!fullBBox) {
+                    throw new Error('Logic error: Full bounding box must be calculated when components are to be added.');
+                }
+                this.hideDialog();
+                if (editingImage) {
+                    const eraseCommand = new Erase([editingImage]);
+                    // Try to preserve the original width
+                    const originalTransform = editingImage.getTransformation();
+                    // || 1: Prevent division by zero
+                    const originalWidth = editingImage.getBBox().width || 1;
+                    const newWidth = fullBBox.transformedBoundingBox(originalTransform).width || 1;
+                    const widthAdjustTransform = Mat33.scaling2D(originalWidth / newWidth);
+                    const commands = [];
+                    for (const component of newComponents) {
+                        commands.push(EditorImage.addElement(component), component.transformBy(originalTransform.rightMul(widthAdjustTransform)), component.setZIndex(editingImage.getZIndex()));
+                    }
+                    this.editor.dispatch(uniteCommands([
+                        ...commands,
+                        eraseCommand,
+                    ]));
+                    selectionTools[0]?.setSelection(newComponents);
+                }
+                else {
+                    await this.editor.addAndCenterComponents(newComponents);
+                }
+            }
+        };
+    }
+}
+InsertImageWidget.nextInputId = 0;
+export default InsertImageWidget;

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

@@ -0,0 +1 @@
+export {};

package/dist/mjs/toolbar/widgets/TextToolWidget.mjs

@@ -54,9 +54,11 @@ class TextToolWidget extends BaseToolWidget {
         colorLabel.setAttribute('for', colorInput.id);
         sizeInput.id = `${toolbarCSSPrefix}-text-size-input-${TextToolWidget.idCounter++}`;
         sizeLabel.setAttribute('for', sizeInput.id);
-        addFontToInput('monospace');
-        addFontToInput('serif');
-        addFontToInput('sans-serif');
+        const defaultFonts = this.editor.getCurrentSettings().text?.fonts ?? [];
+        for (const font of defaultFonts) {
+            addFontToInput(font);
+        }
+        fontInput.classList.add('font-selector');
         fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
         fontLabel.setAttribute('for', fontInput.id);
         fontInput.onchange = () => {

package/dist/mjs/toolbar/widgets/TextToolWidget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/toolbar/widgets/components/makeFileInput.d.ts

@@ -1,9 +1,19 @@
 import { MutableReactiveValue } from '../../../util/ReactiveValue';
 import { ToolbarContext } from '../../types';
+export interface CustomFilePickerProps {
+    setOnCancelCallback(onCancel: () => void): void;
+}
+export type ShowCustomFilePickerCallback = (props: CustomFilePickerProps) => Promise<File[] | null>;
+export interface FileInputOptions {
+    readonly accepts?: string;
+    readonly allowMultiSelect?: boolean;
+    readonly customPickerAction?: ShowCustomFilePickerCallback;
+}
 /**
- * Creates a stylized file input.
+ * Creates a stylized file input. This file input can either use the system file picker, or a custom
+ * one specified by `customPickerAction`.
  */
-declare const makeFileInput: (labelText: string, context: ToolbarContext, accepts?: string) => {
+declare const makeFileInput: (labelText: string, context: ToolbarContext, { accepts, allowMultiSelect, customPickerAction }?: FileInputOptions) => {
     container: HTMLDivElement;
     input: HTMLInputElement;
     selectedFiles: MutableReactiveValue<File[]>;

package/dist/mjs/toolbar/widgets/components/makeFileInput.mjs

@@ -1,9 +1,10 @@
 import  ReactiveValue  from '../../../util/ReactiveValue.mjs';
 let idCounter = 0;
 /**
- * Creates a stylized file input.
+ * Creates a stylized file input. This file input can either use the system file picker, or a custom
+ * one specified by `customPickerAction`.
  */
-const makeFileInput = (labelText, context, accepts = '*') => {
+const makeFileInput = (labelText, context, { accepts = '*', allowMultiSelect = false, customPickerAction } = {}) => {
     const container = document.createElement('div');
     const label = document.createElement('label');
     const input = document.createElement('input');
@@ -13,7 +14,9 @@ const makeFileInput = (labelText, context, accepts = '*') => {
     container.classList.add('toolbar--file-input-container');
     label.appendChild(document.createTextNode(labelText));
     input.accept = accepts;
-    input.type = 'file';
+    input.type = customPickerAction ? 'button' : 'file';
+    input.classList.add('file-input');
+    input.multiple = allowMultiSelect;
     // Associate the label with the input
     const inputId = `js-draw-file-input-${idCounter++}`;
     input.setAttribute('id', inputId);
@@ -24,48 +27,33 @@ const makeFileInput = (labelText, context, accepts = '*') => {
     label.appendChild(descriptionBox);
     container.replaceChildren(label, input);
     const selectedFiles = ReactiveValue.fromInitialValue([]);
-    // Support droping files
-    label.addEventListener('dragover', event => {
-        event.preventDefault();
-        label.classList.add('drag-target');
-    });
-    label.addEventListener('dragenter', event => {
-        event.preventDefault();
-        label.classList.add('drag-target');
-    });
-    label.addEventListener('dragleave', event => {
-        event.preventDefault();
-        // Ensure the event wasn't targeting a child.
-        // See https://stackoverflow.com/a/54271161 and
-        //     https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget
-        const enteringElement = event.relatedTarget;
-        if (!enteringElement || !label.contains(enteringElement)) {
-            label.classList.remove('drag-target');
-        }
-    });
-    // See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#process_the_drop
-    label.addEventListener('drop', event => {
-        event.preventDefault();
-        label.classList.remove('drag-target');
-        const fileList = [];
-        if (event.dataTransfer) {
-            fileList.push(...event.dataTransfer.files);
-        }
-        selectedFiles.set(fileList);
-    });
-    input.addEventListener('change', () => {
-        const fileList = input.files ?? [];
-        selectedFiles.set([...fileList]);
-    });
-    selectedFiles.onUpdate(files => {
-        if (files.length === 0 && input.files && input.files.length > 0) {
-            input.value = '';
+    let loading = false;
+    let cancelLoading = null;
+    const updateStatusText = () => {
+        const files = selectedFiles.get();
+        if (loading) {
+            descriptionText.textContent = context.localization.fileInput__loading;
+            if (cancelLoading) {
+                const cancelText = document.createElement('b');
+                cancelText.textContent = context.localization.cancel;
+                cancelText.classList.add('cancel-button');
+                descriptionText.appendChild(cancelText);
+            }
+            icon.style.display = 'none';
         }
-    });
-    // Update the status text and hide/show the icon.
-    selectedFiles.onUpdateAndNow(files => {
-        if (files.length > 0) {
-            descriptionText.innerText = files.map(file => file.name).join('\n');
+        else if (files.length > 0) {
+            const fileNames = files.map(file => file.name);
+            const maxNames = 5;
+            if (fileNames.length <= maxNames) {
+                descriptionText.textContent = fileNames.join('\n');
+            }
+            else {
+                const fileNamesToShow = fileNames.slice(0, maxNames - 1);
+                descriptionText.textContent = [
+                    ...fileNamesToShow,
+                    context.localization.fileInput__andNMoreFiles(fileNames.length - fileNamesToShow.length),
+                ].join('\n');
+            }
             // Only show the icon when there are files
             icon.style.display = 'none';
         }
@@ -85,7 +73,7 @@ const makeFileInput = (labelText, context, accepts = '*') => {
                 // Inside a {{pair of curly braces}}?
                 if (i % 2 === 1) {
                     const boldedText = document.createElement('b');
-                    boldedText.innerText = segments[i];
+                    boldedText.textContent = segments[i];
                     descriptionText.appendChild(boldedText);
                 }
                 else {
@@ -93,7 +81,87 @@ const makeFileInput = (labelText, context, accepts = '*') => {
                 }
             }
         }
+    };
+    const addFileEventListeners = () => {
+        // Support dropping files
+        label.addEventListener('dragover', event => {
+            event.preventDefault();
+            label.classList.add('drag-target');
+        });
+        label.addEventListener('dragenter', event => {
+            event.preventDefault();
+            label.classList.add('drag-target');
+        });
+        label.addEventListener('dragleave', event => {
+            event.preventDefault();
+            // Ensure the event wasn't targeting a child.
+            // See https://stackoverflow.com/a/54271161 and
+            //     https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/relatedTarget
+            const enteringElement = event.relatedTarget;
+            if (!enteringElement || !label.contains(enteringElement)) {
+                label.classList.remove('drag-target');
+            }
+        });
+        // See https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop#process_the_drop
+        label.addEventListener('drop', event => {
+            event.preventDefault();
+            label.classList.remove('drag-target');
+            const fileList = [];
+            if (event.dataTransfer) {
+                fileList.push(...event.dataTransfer.files);
+            }
+            selectedFiles.set(fileList);
+        });
+        input.addEventListener('change', () => {
+            const fileList = input.files ?? [];
+            selectedFiles.set([...fileList]);
+        });
+    };
+    addFileEventListeners();
+    // Support for custom file pickers
+    if (customPickerAction) {
+        const promptForFiles = async () => {
+            if (loading) {
+                cancelLoading?.();
+                return;
+            }
+            container.classList.add('-loading');
+            loading = true;
+            updateStatusText();
+            try {
+                const data = await customPickerAction({
+                    setOnCancelCallback: (onCancel) => {
+                        if (!loading) {
+                            throw new Error('Task already completed. Can\'t register cancel handler.');
+                        }
+                        cancelLoading = () => {
+                            cancelLoading = null;
+                            updateStatusText();
+                            onCancel();
+                        };
+                        updateStatusText();
+                    },
+                });
+                if (data) {
+                    selectedFiles.set(data);
+                }
+            }
+            finally {
+                container.classList.remove('-loading');
+                loading = false;
+                updateStatusText();
+            }
+        };
+        input.onclick = promptForFiles;
+    }
+    selectedFiles.onUpdate(files => {
+        if (files.length === 0 && input.files && input.files.length > 0) {
+            input.value = '';
+        }
+        cancelLoading?.();
     });
+    // Update the status text and hide/show the icon.
+    selectedFiles.onUpdateAndNow(updateStatusText);
     return {
         container,
         input,

package/dist/mjs/toolbar/widgets/components/makeFileInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/mjs/toolbar/widgets/components/makeSnappedList.d.ts

@@ -0,0 +1,15 @@
+import { ReactiveValue } from '../../../util/ReactiveValue';
+export interface SnappedListItem<DataType> {
+    element: HTMLElement;
+    data: DataType;
+}
+type SnappedListItems<DataType> = Array<SnappedListItem<DataType>>;
+export interface SnappedListControl<DataType> {
+    container: HTMLElement;
+    visibleItem: ReactiveValue<DataType | null>;
+}
+/**
+ * Creates a list that snaps to each item and reports the selected item.
+ */
+declare const makeSnappedList: <DataType>(itemsValue: ReactiveValue<SnappedListItems<DataType>>) => SnappedListControl<DataType>;
+export default makeSnappedList;