js-draw 0.25.0 → 1.0.0

package/dist/mjs/toolbar/{makeColorInput.mjs → widgets/components/makeColorInput.mjs}

@@ -1,30 +1,30 @@
-import  Color4  from '../Color4.mjs';
-import  PipetteTool  from '../tools/PipetteTool.mjs';
-import  { EditorEventType }  from '../types.mjs';
+import { Color4 } from '@js-draw/math';
+import  PipetteTool  from '../../../tools/PipetteTool.mjs';
+import  { EditorEventType }  from '../../../types.mjs';
 // Returns [ color input, input container, callback to change the color value ].
-export var makeColorInput = function (editor, onColorChange) {
-    var colorInputContainer = document.createElement('span');
-    var colorInput = document.createElement('input');
+export const makeColorInput = (editor, onColorChange) => {
+    const colorInputContainer = document.createElement('span');
+    const colorInput = document.createElement('input');
     colorInput.type = 'button';
     colorInput.classList.add('coloris_input');
     colorInputContainer.classList.add('color-input-container');
     colorInputContainer.appendChild(colorInput);
-    var pipetteController = addPipetteTool(editor, colorInputContainer, function (color) {
+    const pipetteController = addPipetteTool(editor, colorInputContainer, (color) => {
         colorInput.value = color.toHexString();
         onInputEnd();
         // Update the color preview, if it exists (may be managed by Coloris).
-        var parentElem = colorInput.parentElement;
+        const parentElem = colorInput.parentElement;
         if (parentElem && parentElem.classList.contains('clr-field')) {
             parentElem.style.color = colorInput.value;
         }
     });
-    var currentColor;
-    var handleColorInput = function () {
+    let currentColor;
+    const handleColorInput = () => {
         currentColor = Color4.fromHex(colorInput.value);
     };
     // Only change the pen color when we finish sending input (this limits the number of
     // editor events triggered and accessibility announcements).
-    var onInputEnd = function () {
+    const onInputEnd = () => {
         handleColorInput();
         if (currentColor) {
             editor.announceForAccessibility(editor.localization.colorChangedAnnouncement(currentColor.toHexString()));
@@ -36,19 +36,23 @@ export var makeColorInput = function (editor, onColorChange) {
         }
     };
     colorInput.oninput = handleColorInput;
-    colorInput.addEventListener('open', function () {
+    let isOpen = false;
+    colorInput.addEventListener('open', () => {
+        isOpen = true;
         editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
             kind: EditorEventType.ColorPickerToggled,
             open: true,
         });
         pipetteController.cancel();
+        colorInputContainer.classList.add('picker-open');
         // Focus the Coloris color picker, if it exists.
         // Don't focus the text input within the color picker, however,
         // as this displays a keyboard on mobile devices.
-        var colorPickerElem = document.querySelector('#clr-picker #clr-hue-slider');
-        colorPickerElem === null || colorPickerElem === void 0 ? void 0 : colorPickerElem.focus();
+        const colorPickerElem = document.querySelector('#clr-picker #clr-hue-slider');
+        colorPickerElem?.focus();
     });
-    colorInput.addEventListener('close', function () {
+    const onClose = () => {
+        isOpen = false;
         editor.notifier.dispatch(EditorEventType.ColorPickerToggled, {
             kind: EditorEventType.ColorPickerToggled,
             open: false,
@@ -56,8 +60,12 @@ export var makeColorInput = function (editor, onColorChange) {
         onInputEnd();
         // Restore focus to the input that opened the color picker
         colorInput.focus();
+        colorInputContainer.classList.remove('picker-open');
+    };
+    colorInput.addEventListener('close', () => {
+        onClose();
     });
-    var setColorInputValue = function (color) {
+    const setColorInputValue = (color) => {
         if (typeof color === 'object') {
             color = color.toHexString();
         }
@@ -66,45 +74,57 @@ export var makeColorInput = function (editor, onColorChange) {
         // https://github.com/mdbassit/Coloris#manually-updating-the-thumbnail
         colorInput.dispatchEvent(new Event('input', { bubbles: true }));
     };
-    return [colorInput, colorInputContainer, setColorInputValue];
+    return {
+        input: colorInput,
+        container: colorInputContainer,
+        setValue: setColorInputValue,
+        closePicker: () => {
+            if (isOpen) {
+                onInputEnd();
+            }
+        },
+    };
 };
-var addPipetteTool = function (editor, container, onColorChange) {
-    var pipetteButton = document.createElement('button');
+const addPipetteTool = (editor, container, onColorChange) => {
+    const pipetteButton = document.createElement('button');
     pipetteButton.classList.add('pipetteButton');
     pipetteButton.title = editor.localization.pickColorFromScreen;
     pipetteButton.setAttribute('alt', pipetteButton.title);
-    var updatePipetteIcon = function (color) {
-        pipetteButton.replaceChildren(editor.icons.makePipetteIcon(color));
+    const pickColorLabel = document.createElement('span');
+    pickColorLabel.classList.add('pickColorInstructions');
+    pickColorLabel.innerText = editor.localization.clickToPickColorAnnouncement;
+    const updatePipetteButtonContent = (color) => {
+        pipetteButton.replaceChildren(editor.icons.makePipetteIcon(color), pickColorLabel);
     };
-    updatePipetteIcon();
-    var pipetteTool = editor.toolController.getMatchingTools(PipetteTool)[0];
-    var endColorSelectMode = function () {
-        pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.clearColorListener();
-        updatePipetteIcon();
+    updatePipetteButtonContent();
+    const pipetteTool = editor.toolController.getMatchingTools(PipetteTool)[0];
+    const endColorSelectMode = () => {
+        pipetteTool?.clearColorListener();
+        updatePipetteButtonContent();
         pipetteButton.classList.remove('active');
     };
-    var pipetteColorSelect = function (color) {
+    const pipetteColorSelect = (color) => {
         endColorSelectMode();
         if (color) {
             onColorChange(color);
         }
     };
-    var pipetteColorPreview = function (color) {
+    const pipetteColorPreview = (color) => {
         if (color) {
-            updatePipetteIcon(color);
+            updatePipetteButtonContent(color);
         }
         else {
-            updatePipetteIcon();
+            updatePipetteButtonContent();
         }
     };
-    pipetteButton.onclick = function () {
+    pipetteButton.onclick = () => {
         // If already picking, cancel it.
         if (pipetteButton.classList.contains('active')) {
             endColorSelectMode();
             editor.announceForAccessibility(editor.localization.colorSelectionCanceledAnnouncement);
             return;
         }
-        pipetteTool === null || pipetteTool === void 0 ? void 0 : pipetteTool.setColorListener(pipetteColorPreview, pipetteColorSelect);
+        pipetteTool?.setColorListener(pipetteColorPreview, pipetteColorSelect);
         if (pipetteTool) {
             pipetteButton.classList.add('active');
             editor.announceForAccessibility(editor.localization.clickToPickColorAnnouncement);
@@ -113,7 +133,7 @@ var addPipetteTool = function (editor, container, onColorChange) {
     container.appendChild(pipetteButton);
     return {
         // Cancel a pipette color selection if one is in progress.
-        cancel: function () {
+        cancel: () => {
             endColorSelectMode();
         },
     };

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

@@ -0,0 +1,12 @@
+import { MutableReactiveValue } from '../../../util/ReactiveValue';
+import { ToolbarContext } from '../../types';
+/**
+ * Creates a stylized file input.
+ */
+declare const makeFileInput: (labelText: string, context: ToolbarContext, accepts?: string) => {
+    container: HTMLDivElement;
+    input: HTMLInputElement;
+    selectedFiles: MutableReactiveValue<File[]>;
+    addTo: (parent: HTMLElement) => void;
+};
+export default makeFileInput;

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

@@ -0,0 +1,106 @@
+import  ReactiveValue  from '../../../util/ReactiveValue.mjs';
+let idCounter = 0;
+/**
+ * Creates a stylized file input.
+ */
+const makeFileInput = (labelText, context, accepts = '*') => {
+    const container = document.createElement('div');
+    const label = document.createElement('label');
+    const input = document.createElement('input');
+    const descriptionBox = document.createElement('div');
+    descriptionBox.classList.add('toolbar--file-input-description');
+    const descriptionText = document.createElement('span');
+    container.classList.add('toolbar--file-input-container');
+    label.appendChild(document.createTextNode(labelText));
+    input.accept = accepts;
+    input.type = 'file';
+    // Associate the label with the input
+    const inputId = `js-draw-file-input-${idCounter++}`;
+    input.setAttribute('id', inputId);
+    label.htmlFor = inputId;
+    const icon = context.icons.makeUploadFileIcon();
+    icon.classList.add('icon');
+    descriptionBox.replaceChildren(icon, descriptionText);
+    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 = '';
+        }
+    });
+    // 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');
+            // Only show the icon when there are files
+            icon.style.display = 'none';
+        }
+        else {
+            // Show the icon
+            icon.style.display = '';
+            const text = context.localization.dragAndDropHereOrBrowse;
+            // Split into regions surrounded by {{curly braces}} and regions that are
+            // not.
+            // When given a regular expression, `.split` outputs an array. For example,
+            //    "a test __of__ split".split(/__(.*)__/)
+            // results in
+            //    ['a test ', 'of', ' split'].
+            const segments = text.split(/[{]{2}(.*)[}]{2}/g);
+            descriptionText.replaceChildren();
+            for (let i = 0; i < segments.length; i++) {
+                // Inside a {{pair of curly braces}}?
+                if (i % 2 === 1) {
+                    const boldedText = document.createElement('b');
+                    boldedText.innerText = segments[i];
+                    descriptionText.appendChild(boldedText);
+                }
+                else {
+                    descriptionText.appendChild(document.createTextNode(segments[i]));
+                }
+            }
+        }
+    });
+    return {
+        container,
+        input,
+        selectedFiles,
+        addTo: (parent) => {
+            parent.appendChild(container);
+        },
+    };
+};
+export default makeFileInput;

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

@@ -0,0 +1,24 @@
+import { MutableReactiveValue } from '../../../util/ReactiveValue';
+import { IconElemType } from '../../IconProvider';
+interface GridSelectChoice<ChoiceIdType> {
+    id: ChoiceIdType;
+    makeIcon: () => IconElemType;
+    title: string;
+}
+interface GridSelector<ChoiceIdType> {
+    value: MutableReactiveValue<ChoiceIdType>;
+    linkWith: (other: GridSelector<ChoiceIdType>) => void;
+    updateIcons: () => void;
+    addTo: (parent: HTMLElement) => void;
+    /** Used internally @internal */
+    _radiogroupName: string;
+}
+/**
+ * Creates a widget that allows users to select one of serveral items from a list.
+ *
+ * `ChoiceIdType` should be `string`, a `number`, or an `enum` (or similar).
+ *
+ * If this input is set to an ID that is not in `choices`, no item is selected.
+ */
+declare const makeGridSelector: <ChoiceIdType>(labelText: string, defaultId: ChoiceIdType, choices: GridSelectChoice<ChoiceIdType>[]) => GridSelector<ChoiceIdType>;
+export default makeGridSelector;

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

@@ -0,0 +1,122 @@
+import  { MutableReactiveValue }  from '../../../util/ReactiveValue.mjs';
+import  stopPropagationOfScrollingWheelEvents  from '../../../util/stopPropagationOfScrollingWheelEvents.mjs';
+import  { toolbarCSSPrefix }  from '../../constants.mjs';
+let idCounter = 0;
+/**
+ * Creates a widget that allows users to select one of serveral items from a list.
+ *
+ * `ChoiceIdType` should be `string`, a `number`, or an `enum` (or similar).
+ *
+ * If this input is set to an ID that is not in `choices`, no item is selected.
+ */
+const makeGridSelector = (
+// Text before the grid selector used as a label
+labelText, defaultId, choices) => {
+    const outerContainer = document.createElement('div');
+    outerContainer.classList.add(`${toolbarCSSPrefix}grid-selector`);
+    const selectedValue = MutableReactiveValue.fromInitialValue(defaultId);
+    const menuContainer = document.createElement('div');
+    menuContainer.setAttribute('role', 'menu');
+    menuContainer.id = `${toolbarCSSPrefix}-grid-select-id-${idCounter++}`;
+    stopPropagationOfScrollingWheelEvents(menuContainer);
+    const label = document.createElement('label');
+    label.innerText = labelText;
+    label.htmlFor = menuContainer.id;
+    outerContainer.appendChild(label);
+    // All buttons in a radiogroup need the same name attribute.
+    let radiogroupName = `${toolbarCSSPrefix}-grid-selector-${idCounter++}`;
+    const createChoiceButton = (record) => {
+        const buttonContainer = document.createElement('div');
+        buttonContainer.classList.add('choice-button');
+        const button = document.createElement('input');
+        button.type = 'radio';
+        button.id = `${toolbarCSSPrefix}-grid-select-button-${idCounter++}`;
+        // Clicking any part of labelContainer triggers the radio button.
+        const labelContainer = document.createElement('label');
+        const rebuildLabel = () => {
+            labelContainer.setAttribute('title', record.title);
+            const labelText = document.createElement('span');
+            labelText.classList.add('button-label-text');
+            const icon = record.makeIcon();
+            icon.classList.add('icon');
+            // The title of the record
+            labelText.innerText = record.title;
+            labelContainer.htmlFor = button.id;
+            labelContainer.replaceChildren(icon, labelText);
+        };
+        rebuildLabel();
+        // Mark the button as belonging to the current group (causes
+        // other buttons in the same group to automatically uncheck
+        // when this button is checked).
+        const updateButtonRadiogroupName = () => {
+            button.name = radiogroupName;
+        };
+        updateButtonRadiogroupName();
+        const updateButtonCSS = () => {
+            if (button.checked) {
+                buttonContainer.classList.add('checked');
+            }
+            else {
+                buttonContainer.classList.remove('checked');
+            }
+        };
+        button.oninput = () => {
+            // Setting the selected value fires an event that causes the value
+            // of this button to be set.
+            if (button.checked) {
+                selectedValue.set(record.id);
+            }
+            updateButtonCSS();
+        };
+        buttonContainer.replaceChildren(button, labelContainer);
+        menuContainer.appendChild(buttonContainer);
+        // Set whether the current button is checked
+        const setChecked = (checked) => {
+            button.checked = checked;
+            updateButtonCSS();
+        };
+        setChecked(false);
+        // Updates the factory's icon based on the current style of the tool.
+        const updateIcon = () => {
+            rebuildLabel();
+        };
+        return {
+            choiceRecord: record,
+            setChecked,
+            updateIcon,
+            updateButtonRadiogroupName
+        };
+    };
+    const buttons = [];
+    for (const choice of choices) {
+        buttons.push(createChoiceButton(choice));
+    }
+    // invariant: buttons.length = choices.length
+    // However, it is still possible that selectedValue does not correspond
+    // to a choice in `choices`. This is acceptable.
+    outerContainer.appendChild(menuContainer);
+    selectedValue.onUpdateAndNow(choiceId => {
+        for (let i = 0; i < buttons.length; i++) {
+            buttons[i].setChecked(buttons[i].choiceRecord.id === choiceId);
+        }
+    });
+    const result = {
+        value: selectedValue,
+        _radiogroupName: radiogroupName,
+        linkWith: (other) => {
+            result._radiogroupName = other._radiogroupName;
+            radiogroupName = other._radiogroupName;
+            for (const button of buttons) {
+                button.updateButtonRadiogroupName();
+            }
+        },
+        updateIcons: () => {
+            buttons.forEach(button => button.updateIcon());
+        },
+        addTo: (parent) => {
+            parent.appendChild(outerContainer);
+        },
+    };
+    return result;
+};
+export default makeGridSelector;

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

@@ -0,0 +1,7 @@
+/**
+ * Creates a separator element that renders a line and, optionally, a header.
+ */
+declare const makeSeparator: (header?: string) => {
+    addTo: (parent: HTMLElement) => void;
+};
+export default makeSeparator;

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

@@ -0,0 +1,14 @@
+/**
+ * Creates a separator element that renders a line and, optionally, a header.
+ */
+const makeSeparator = (header = '') => {
+    const container = document.createElement('div');
+    container.classList.add('tool-dropdown-separator');
+    container.innerText = header;
+    return {
+        addTo: (parent) => {
+            parent.appendChild(container);
+        },
+    };
+};
+export default makeSeparator;

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

@@ -0,0 +1,8 @@
+import { ToolbarContext } from '../../types';
+declare const makeThicknessSlider: (context: ToolbarContext, onChange: (value: number) => void) => {
+    container: HTMLDivElement;
+    addTo: (parent: HTMLElement) => void;
+    setBounds: (min: number, max: number) => void;
+    setValue: (thickness: number) => void;
+};
+export default makeThicknessSlider;

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

@@ -0,0 +1,45 @@
+import { toRoundedString } from '@js-draw/math';
+import  { toolbarCSSPrefix }  from '../../constants.mjs';
+let idCounter = 0;
+const makeThicknessSlider = (context, onChange) => {
+    const container = document.createElement('div');
+    const thicknessLabel = document.createElement('label');
+    const thicknessInput = document.createElement('input');
+    container.classList.add(`${toolbarCSSPrefix}thicknessSliderContainer`);
+    // Give inputs IDs so we can label them with a <label for=...>Label text</label>
+    thicknessInput.id = `${toolbarCSSPrefix}thicknessInput${idCounter++}`;
+    thicknessLabel.innerText = context.localization.thicknessLabel;
+    thicknessLabel.setAttribute('for', thicknessInput.id);
+    // Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
+    const inverseThicknessInputFn = (t) => Math.log10(t);
+    const thicknessInputFn = (t) => 10 ** t;
+    thicknessInput.type = 'range';
+    thicknessInput.oninput = () => {
+        onChange(thicknessInputFn(parseFloat(thicknessInput.value)));
+    };
+    container.appendChild(thicknessLabel);
+    container.appendChild(thicknessInput);
+    const setBounds = (min, max) => {
+        const round = (value, roundUp) => {
+            const roundFn = roundUp ? Math.ceil : Math.floor;
+            return roundFn(value * 100) / 100;
+        };
+        const sliderMin = round(inverseThicknessInputFn(min), false);
+        const sliderMax = round(inverseThicknessInputFn(max), true);
+        thicknessInput.min = `${sliderMin}`;
+        thicknessInput.max = `${sliderMax}`;
+        thicknessInput.step = `${toRoundedString((sliderMax - sliderMin) / 20)}`;
+    };
+    setBounds(2, 262);
+    return {
+        container,
+        addTo: (parent) => {
+            parent.appendChild(container);
+        },
+        setBounds,
+        setValue: (thickness) => {
+            thicknessInput.value = inverseThicknessInputFn(thickness).toString();
+        },
+    };
+};
+export default makeThicknessSlider;

package/dist/mjs/toolbar/widgets/keybindings.mjs

@@ -1,10 +1,10 @@
 import  KeyboardShortcutManager  from '../../shortcuts/KeyboardShortcutManager.mjs';
 // Selection
-export var resizeImageToSelectionKeyboardShortcut = 'jsdraw.toolbar.SelectionTool.resizeImageToSelection';
+export const resizeImageToSelectionKeyboardShortcut = 'jsdraw.toolbar.SelectionTool.resizeImageToSelection';
 KeyboardShortcutManager.registerDefaultKeyboardShortcut(resizeImageToSelectionKeyboardShortcut, ['ctrlOrMeta+r'], 'Resize image to selection');
 // Pen tool
-export var selectStrokeTypeKeyboardShortcutIds = [1, 2, 3, 4, 5, 6, 7].map(function (id) { return "jsdraw.toolbar.PenTool.select-pen-".concat(id); });
-for (var i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
-    var id = selectStrokeTypeKeyboardShortcutIds[i];
-    KeyboardShortcutManager.registerDefaultKeyboardShortcut(id, ["ctrlOrMeta+".concat((i + 1))], 'Select pen style ' + (i + 1));
+export const selectStrokeTypeKeyboardShortcutIds = [1, 2, 3, 4, 5, 6, 7].map(id => `jsdraw.toolbar.PenTool.select-pen-${id}`);
+for (let i = 0; i < selectStrokeTypeKeyboardShortcutIds.length; i++) {
+    const id = selectStrokeTypeKeyboardShortcutIds[i];
+    KeyboardShortcutManager.registerDefaultKeyboardShortcut(id, [`CtrlOrMeta+Digit${(i + 1)}`], 'Select pen style ' + (i + 1));
 }

package/dist/mjs/toolbar/widgets/layout/DropdownLayoutManager.d.ts

@@ -0,0 +1,21 @@
+import { EditorNotifier } from '../../../types';
+import { ToolbarLocalization } from '../../localization';
+import { ToolMenu, WidgetContentLayoutManager, ToolMenuParent } from './types';
+export default class DropdownLayoutManager implements WidgetContentLayoutManager {
+    private localization;
+    private notifier;
+    private dropdowns;
+    constructor(announceForAccessibility: (text: string) => void, localization: ToolbarLocalization);
+    private listeners;
+    private connectedNotifiers;
+    connectToEditorNotifier(notifier: EditorNotifier): void;
+    /** Creates a dropdown within `parent`. */
+    createToolMenu(parent: ToolMenuParent): ToolMenu;
+    /**
+     * Adds/removes listeners based on whether we have any managed dropdowns.
+     *
+     * We attempt to clean up all resources when `dropdowns.size == 0`, at which
+     * point, an instance of this could be safely garbage collected.
+     */
+    private refreshListeners;
+}