js-draw 0.25.0 → 1.0.0

package/dist/cjs/toolbar/EdgeToolbar.js

@@ -0,0 +1,422 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeEdgeToolbar = void 0;
+const BaseWidget_1 = require("./widgets/BaseWidget");
+const constants_1 = require("./constants");
+const EdgeToolbarLayoutManager_1 = __importDefault(require("./widgets/layout/EdgeToolbarLayoutManager"));
+const ReactiveValue_1 = require("../util/ReactiveValue");
+const AbstractToolbar_1 = __importDefault(require("./AbstractToolbar"));
+const stopPropagationOfScrollingWheelEvents_1 = __importDefault(require("../util/stopPropagationOfScrollingWheelEvents"));
+const makeEdgeToolbar = (editor) => {
+    return new EdgeToolbar(editor, editor.getRootElement(), editor.localization);
+};
+exports.makeEdgeToolbar = makeEdgeToolbar;
+class EdgeToolbar extends AbstractToolbar_1.default {
+    /** @internal */
+    constructor(editor, parent, localizationTable) {
+        super(editor, localizationTable);
+        this.toolbarContainer = document.createElement('div');
+        this.toolbarContainer.classList.add(`${constants_1.toolbarCSSPrefix}root`);
+        this.toolbarContainer.classList.add(`${constants_1.toolbarCSSPrefix}element`);
+        this.toolbarContainer.classList.add(`${constants_1.toolbarCSSPrefix}edge-toolbar`);
+        this.toolbarContainer.setAttribute('role', 'toolbar');
+        this.toolbarActionRow = document.createElement('div');
+        this.toolbarActionRow.classList.add('toolbar-element', 'toolbar-action-row');
+        this.toolbarToolRow = document.createElement('div');
+        this.toolbarToolRow.classList.add('toolbar-element', 'toolbar-tool-row');
+        (0, stopPropagationOfScrollingWheelEvents_1.default)(this.toolbarToolRow);
+        if ('ResizeObserver' in window) {
+            this.toolRowResizeObserver = new ResizeObserver((_entries) => {
+                this.onToolbarRowResize();
+            });
+            this.toolRowResizeObserver.observe(this.toolbarToolRow);
+        }
+        else {
+            console.warn('ResizeObserver not supported. Toolbar will not resize.');
+        }
+        this.toolbarContainer.replaceChildren(this.toolbarActionRow, this.toolbarToolRow);
+        parent.appendChild(this.toolbarContainer);
+        this.sidebarVisible = ReactiveValue_1.ReactiveValue.fromInitialValue(false);
+        this.sidebarY = ReactiveValue_1.ReactiveValue.fromInitialValue(0);
+        // Create the container elements
+        this.menuContainer = document.createElement('div');
+        this.menuContainer.classList.add(`${constants_1.toolbarCSSPrefix}edgemenu-container`);
+        this.sidebarContainer = document.createElement('div');
+        this.sidebarContainer.classList.add(`${constants_1.toolbarCSSPrefix}edgemenu`, `${constants_1.toolbarCSSPrefix}element`);
+        this.sidebarContainer.classList.add(`${constants_1.toolbarCSSPrefix}tool-properties`);
+        this.sidebarContent = document.createElement('div');
+        // Setup resizing/dragging
+        this.sidebarY.onUpdateAndNow(y => {
+            const belowEdgeClassName = 'dropdown-below-edge';
+            if (y > 0) {
+                this.sidebarContainer.style.translate = `0 ${y}px`;
+                this.sidebarContainer.style.paddingBottom = '';
+                this.menuContainer.classList.add(belowEdgeClassName);
+            }
+            else {
+                this.sidebarContainer.style.translate = '';
+                this.sidebarContainer.style.paddingBottom = `${-y}px`;
+                this.menuContainer.classList.remove(belowEdgeClassName);
+            }
+        });
+        this.closeButton = document.createElement('button');
+        this.closeButton.classList.add('drag-elem');
+        // The close button has default focus -- forward its events to the main editor so that keyboard
+        // shortcuts still work.
+        this.editor.handleKeyEventsFrom(this.closeButton, event => {
+            // Don't send
+            return event.code !== 'Space' && event.code !== 'Enter' && event.code !== 'Tab';
+        });
+        // Close the sidebar when pressing escape
+        this.sidebarContainer.addEventListener('keyup', event => {
+            if (!event.defaultPrevented && event.code === 'Escape') {
+                this.sidebarVisible.set(false);
+                event.preventDefault();
+            }
+        });
+        this.initDragListeners();
+        // Initialize the layout manager
+        const setSidebarContent = (...content) => {
+            this.sidebarContent.replaceChildren(...content);
+            this.setupColorPickers();
+        };
+        this.sidebarTitle = ReactiveValue_1.MutableReactiveValue.fromInitialValue('');
+        this.layoutManager = new EdgeToolbarLayoutManager_1.default(setSidebarContent, this.sidebarTitle, this.sidebarVisible, editor.announceForAccessibility.bind(editor), localizationTable);
+        this.sidebarTitle.onUpdateAndNow(title => {
+            this.closeButton.setAttribute('aria-label', localizationTable.closeSidebar(title));
+        });
+        // Make things visible/keep hidden.
+        this.listenForVisibilityChanges();
+        this.sidebarContainer.replaceChildren(this.closeButton, this.sidebarContent);
+        this.menuContainer.replaceChildren(this.sidebarContainer);
+        parent.appendChild(this.menuContainer);
+    }
+    listenForVisibilityChanges() {
+        let animationTimeout = null;
+        const animationDuration = 170;
+        if (!this.sidebarVisible.get()) {
+            this.menuContainer.style.display = 'none';
+            // Set the initial opacity to 0 to allow the `transition` property
+            // to animate it to 1.
+            this.menuContainer.style.opacity = '0';
+        }
+        this.sidebarVisible.onUpdate(visible => {
+            const animationProperties = `${animationDuration}ms ease`;
+            if (visible) {
+                this.sidebarY.set(this.snappedSidebarY());
+                if (animationTimeout) {
+                    clearTimeout(animationTimeout);
+                    animationTimeout = null;
+                }
+                this.menuContainer.style.display = '';
+                this.sidebarContainer.style.animation = `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-transition-in`;
+                this.menuContainer.style.animation = `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-container-transition-in`;
+                this.menuContainer.style.opacity = '1';
+                // Focus the close button when first shown.
+                this.closeButton.focus();
+            }
+            else {
+                this.closeColorPickers();
+                if (animationTimeout === null) {
+                    this.sidebarContainer.style.animation = ` ${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-transition-out`;
+                    this.menuContainer.style.animation = `${animationProperties} ${constants_1.toolbarCSSPrefix}-edgemenu-container-transition-out`;
+                    // Manually set the container's opacity to prevent flickering when closing
+                    // the toolbar.
+                    this.menuContainer.style.opacity = '0';
+                    // Hide overflow -- don't show the part of the edge toolbar that's outside of
+                    // the editor.
+                    //this.menuContainer.style.overflowY = 'hidden';
+                    this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.sidebarTitle.get()));
+                    animationTimeout = setTimeout(() => {
+                        this.menuContainer.style.display = 'none';
+                        this.menuContainer.style.overflowY = '';
+                        animationTimeout = null;
+                    }, animationDuration);
+                }
+            }
+        });
+    }
+    onToolbarRowResize() {
+        const setExtraPadding = () => {
+            const visibleWidth = this.toolbarToolRow.clientWidth;
+            // Determine whether extra spacing needs to be added so that one button is cut
+            // in half. Ideally, when there is scroll, one button will be cut in half to show
+            // that scrolling is possible.
+            let currentWidth = 0;
+            let extraPadding = 0;
+            let numVisibleButtons = 0;
+            for (const child of this.toolbarToolRow.children) {
+                // Use the first child -- padding is applied around that child. Assumes
+                // that the button's width is its height plus some padding.
+                const buttonBaseSize = child.clientHeight;
+                currentWidth += buttonBaseSize;
+                numVisibleButtons++;
+                if (currentWidth > visibleWidth) {
+                    // We want extraPadding + (currentWidth - buttonWidth / 2) = visibleWidth.
+                    // Thus, extraPadding = visibleWidth - currentWidth + buttonWidth / 2;
+                    extraPadding = visibleWidth - currentWidth + buttonBaseSize / 2;
+                    // Ensure that the padding is positive
+                    if (extraPadding < 0) {
+                        extraPadding += buttonBaseSize;
+                    }
+                    break;
+                }
+            }
+            const perButtonPadding = Math.round(extraPadding / numVisibleButtons * 10) / 10;
+            this.toolbarToolRow.style.setProperty('--extra-left-right-padding', `${perButtonPadding}px`);
+        };
+        const actionRowBBox = this.toolbarActionRow.getBoundingClientRect();
+        const toolbarRowBBox = this.toolbarToolRow.getBoundingClientRect();
+        const inSameRow = actionRowBBox.y === toolbarRowBBox.y;
+        const onDifferentRows = actionRowBBox.y + actionRowBBox.height <= toolbarRowBBox.y;
+        if (onDifferentRows) {
+            this.toolbarContainer.classList.remove('one-row');
+        }
+        else {
+            this.toolbarContainer.classList.add('one-row');
+        }
+        if (this.toolbarToolRow.clientWidth < this.toolbarToolRow.scrollWidth) {
+            this.toolbarToolRow.classList.add('has-scroll');
+            // If both button areas are in the same row, don't change the padding --
+            // it could lead to an endless loop of reseize events.
+            if (!inSameRow) {
+                setExtraPadding();
+            }
+        }
+        else {
+            this.toolbarToolRow.classList.remove('has-scroll', 'extra-padding');
+        }
+    }
+    addSpacer(_options) {
+        //throw new Error('Method not implemented.');
+        // Unused for this toolbar.
+    }
+    addUndoRedoButtons() {
+        super.addUndoRedoButtons(false);
+    }
+    addDefaults() {
+        this.addDefaultActionButtons();
+        this.addDefaultToolWidgets();
+    }
+    updateWidgetCSSClasses(widget) {
+        const tags = widget.getTags();
+        widget.removeCSSClassFromContainer('label-inline');
+        widget.removeCSSClassFromContainer('label-left');
+        widget.removeCSSClassFromContainer('label-right');
+        if (tags.includes(BaseWidget_1.ToolbarWidgetTag.Save)) {
+            widget.addCSSClassToContainer('label-inline');
+            widget.addCSSClassToContainer('label-right');
+        }
+        if (tags.includes(BaseWidget_1.ToolbarWidgetTag.Exit)) {
+            widget.addCSSClassToContainer('label-inline');
+            widget.addCSSClassToContainer('label-left');
+        }
+    }
+    addWidgetInternal(widget) {
+        this.updateWidgetCSSClasses(widget);
+        widget.setLayoutManager(this.layoutManager);
+        if (widget.mustBeInToplevelMenu()) {
+            widget.addTo(this.toolbarActionRow);
+        }
+        else {
+            widget.addTo(this.toolbarToolRow);
+        }
+    }
+    removeWidgetInternal(widget) {
+        widget.remove();
+    }
+    onRemove() {
+        this.toolbarContainer.remove();
+        this.menuContainer.remove();
+        this.toolRowResizeObserver.disconnect();
+    }
+    initDragListeners() {
+        let lastX = 0;
+        let lastY = 0;
+        let startX = 0;
+        let startY = 0;
+        let pointerDown = false;
+        let capturedPointerId = null;
+        const dragElements = [this.closeButton, this.sidebarContainer, this.sidebarContent];
+        this.manageListener(this.editor.handlePointerEventsExceptClicksFrom(this.menuContainer, (eventName, event) => {
+            if (event.target === this.menuContainer) {
+                if (eventName === 'pointerdown') {
+                    this.sidebarVisible.set(false);
+                }
+                if (eventName === 'pointerup') {
+                    this.editor.focus();
+                }
+                return true;
+            }
+            if (!this.sidebarVisible.get()) {
+                return true;
+            }
+            // Don't send pointer events that don't directly target mainContainer
+            // to the editor
+            return false;
+        }, (_eventName, event) => {
+            return event.target === this.menuContainer;
+        }));
+        const isDraggableElement = (element) => {
+            if (!element) {
+                return false;
+            }
+            if (dragElements.includes(element)) {
+                return true;
+            }
+            // Some inputs handle dragging themselves. Don't also interpret such gestures
+            // as dragging the dropdown.
+            const undraggableElementTypes = ['INPUT', 'SELECT', 'IMG'];
+            let hasSuitableAncestors = false;
+            let ancestor = element.parentElement;
+            while (ancestor) {
+                if (undraggableElementTypes.includes(ancestor.tagName)) {
+                    break;
+                }
+                if (ancestor === this.sidebarContainer) {
+                    hasSuitableAncestors = true;
+                    break;
+                }
+                ancestor = ancestor.parentElement;
+            }
+            return !undraggableElementTypes.includes(element.tagName) && hasSuitableAncestors;
+        };
+        const clickThreshold = 5;
+        // Returns whether the current (or if no current, **the last**) gesture is roughly a click.
+        // Because this can be called **after** a gesture has just ended, it should not require
+        // the gesture to be in progress.
+        const isRoughlyClick = () => {
+            return Math.hypot(lastX - startX, lastY - startY) < clickThreshold;
+        };
+        let startedDragging = false;
+        this.sidebarContainer.addEventListener('pointerdown', event => {
+            if (event.defaultPrevented || !isDraggableElement(event.target)) {
+                return;
+            }
+            if (event.isPrimary) {
+                startedDragging = false;
+                lastX = event.clientX;
+                lastY = event.clientY;
+                startX = event.clientX;
+                startY = event.clientY;
+                capturedPointerId = null;
+                pointerDown = true;
+            }
+        }, { passive: true });
+        let gestureEndTimestamp = 0;
+        const onGestureEnd = (_event) => {
+            // If the pointerup/pointercancel event was for a pointer not being tracked,
+            if (!pointerDown) {
+                return;
+            }
+            gestureEndTimestamp = performance.now();
+            if (capturedPointerId !== null) {
+                this.sidebarContainer.releasePointerCapture(capturedPointerId);
+                capturedPointerId = null;
+            }
+            this.finalizeDrag();
+            pointerDown = false;
+            startedDragging = false;
+        };
+        this.sidebarContainer.onpointermove = event => {
+            if (!event.isPrimary || !pointerDown) {
+                return undefined;
+            }
+            // Mouse event and no buttons pressed? Cancel the event.
+            // This can happen if the event was canceled by a focus change (e.g. by opening a
+            // right-click menu).
+            if (event.pointerType === 'mouse' && event.buttons === 0) {
+                onGestureEnd(event);
+                return undefined;
+            }
+            // Only capture after motion -- capturing early prevents click events in Chrome.
+            if (capturedPointerId === null && !isRoughlyClick()) {
+                this.sidebarContainer.setPointerCapture(event.pointerId);
+                capturedPointerId = event.pointerId;
+            }
+            const x = event.clientX;
+            const y = event.clientY;
+            const dx = x - lastX;
+            const dy = y - lastY;
+            if (Math.abs(y - startY) > clickThreshold || startedDragging) {
+                this.handleDrag(dx, dy);
+                lastX = x;
+                lastY = y;
+                startedDragging = true;
+            }
+        };
+        this.sidebarContainer.onpointerleave = event => {
+            {
+                // Capture the pointer if it exits the container while dragging.
+                if (capturedPointerId === null && pointerDown && event.isPrimary) {
+                    this.sidebarContainer.setPointerCapture(event.pointerId);
+                    capturedPointerId = event.pointerId;
+                }
+            }
+        };
+        this.closeButton.onclick = () => {
+            const wasJustDragging = performance.now() - gestureEndTimestamp < 100;
+            const roughlyClick = isRoughlyClick();
+            // Ignore the click event if it was caused by dragging the button.
+            if (wasJustDragging && roughlyClick || !wasJustDragging) {
+                this.sidebarVisible.set(false);
+            }
+        };
+        this.sidebarContainer.onpointerup = onGestureEnd;
+        this.sidebarContainer.onpointercancel = onGestureEnd;
+    }
+    /**
+     * Updates the position of this menu **during** a drag. After a drag ends,
+     * {@link finalizeDrag} should be called.
+     */
+    handleDrag(_deltaX, deltaY) {
+        this.sidebarContainer.style.transition = 'none';
+        this.sidebarY.set(this.sidebarY.get() + deltaY);
+    }
+    /** Returns `this.sidebarY` rounded to a valid value. */
+    snappedSidebarY(sidebarY) {
+        const y = sidebarY ?? this.sidebarY.get();
+        const snapYs = [-100, 0];
+        // Allow some amount of scrolling if the sidebar is too tall to fit entirely
+        // in the window.
+        if (this.sidebarContainer.clientHeight > window.innerHeight) {
+            snapYs.push(100);
+        }
+        let closestSnap = snapYs[0];
+        for (const snapY of snapYs) {
+            if (Math.abs(snapY - y) < Math.abs(closestSnap - y)) {
+                closestSnap = snapY;
+            }
+        }
+        return closestSnap;
+    }
+    /**
+     * Moves the menu to a valid location or closes it, depending on
+     * the position set by the drag.
+     */
+    finalizeDrag() {
+        this.sidebarContainer.style.transition = '';
+        if (this.sidebarY.get() > this.sidebarContainer.clientHeight / 2) {
+            this.sidebarVisible.set(false);
+        }
+        else {
+            // Snap to the closest valid Y.
+            this.sidebarY.set(this.snappedSidebarY());
+        }
+    }
+    serializeInternal() {
+        return {
+            menuSizeY: this.snappedSidebarY(),
+        };
+    }
+    deserializeInternal(json) {
+        if (typeof json === 'object' && typeof json['menuSizeY'] === 'number') {
+            // Load the y-position of the sidebar  -- call snappedSidebarY to ensure validity.
+            this.sidebarY.set(this.snappedSidebarY(json['menuSizeY']));
+        }
+    }
+}
+exports.default = EdgeToolbar;

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

@@ -1,14 +1,15 @@
-import Color4 from '../Color4';
-import { ComponentBuilderFactory } from '../components/builders/types';
+import { Color4 } from '@js-draw/math';
 import TextRenderingStyle from '../rendering/TextRenderingStyle';
-import Pen from '../tools/Pen';
-export type IconType = HTMLImageElement | SVGElement;
+import { PenStyle } from '../tools/Pen';
+export type IconElemType = HTMLImageElement | SVGElement;
 /**
  * Provides icons that can be used in the toolbar, etc.
  * Extend this class and override methods to customize icons.
  *
  * @example
- * ```ts
+ * ```ts,runnable
+ * import * as jsdraw from 'js-draw';
+ *
  * class CustomIconProvider extends jsdraw.IconProvider {
  *     // Use '☺' instead of the default dropdown symbol.
  *     public makeDropdownIcon() {
@@ -27,36 +28,59 @@ export type IconType = HTMLImageElement | SVGElement;
  * });
  *
  * // Add a toolbar that uses these icons
- * editor.addToolbar();
+ * jsdraw.makeDropdownToolbar(editor).addDefaults();
  * ```
  */
 export default class IconProvider {
-    makeUndoIcon(): IconType;
-    makeRedoIcon(mirror?: boolean): IconType;
-    makeDropdownIcon(): IconType;
-    makeEraserIcon(eraserSize?: number): IconType;
-    makeSelectionIcon(): IconType;
+    #private;
+    makeUndoIcon(): IconElemType;
+    makeRedoIcon(): IconElemType;
+    makeDropdownIcon(): IconElemType;
+    makeEraserIcon(eraserSize?: number): IconElemType;
+    makeSelectionIcon(): IconElemType;
+    makeHandToolIcon(): IconElemType;
+    makeTouchPanningIcon(): IconElemType;
+    /** Unused by js-draw. @deprecated */
+    makeAllDevicePanningIcon(): IconElemType;
+    makeZoomIcon(): IconElemType;
+    makeRotationLockIcon(): IconElemType;
+    makeInsertImageIcon(): IconElemType;
+    makeUploadFileIcon(): IconElemType;
+    makeTextIcon(textStyle: TextRenderingStyle): IconElemType;
+    makePenIcon(penStyle: PenStyle): IconElemType;
+    makeIconFromFactory(penStyle: PenStyle): IconElemType;
+    makePipetteIcon(color?: Color4): IconElemType;
+    /** Unused. @deprecated */
+    makeFormatSelectionIcon(): IconElemType;
+    makeResizeImageToSelectionIcon(): IconElemType;
+    /** Renamed to {@link makeResizeImageToSelectionIcon} @deprecated */
+    makeResizeViewportIcon(): IconElemType;
+    makeDuplicateSelectionIcon(): IconElemType;
+    /** Unused. @deprecated */
+    makePasteIcon(): IconElemType;
+    makeDeleteSelectionIcon(): IconElemType;
+    makeCloseIcon(): IconElemType;
+    makeSaveIcon(): IconElemType;
+    makeConfigureDocumentIcon(): IconElemType;
+    makeOverflowIcon(): IconElemType;
     /**
      * @param pathData - SVG path data (e.g. `m10,10l30,30z`)
      * @param fill - A valid CSS color (e.g. `var(--icon-color)` or `#f0f`). This can be `none`.
      */
-    protected makeIconFromPath(pathData: string, fill?: string, strokeColor?: string, strokeWidth?: string): IconType;
-    makeHandToolIcon(): IconType;
-    makeTouchPanningIcon(): IconType;
-    makeAllDevicePanningIcon(): IconType;
-    makeZoomIcon(): IconType;
-    makeRotationLockIcon(): IconType;
-    makeInsertImageIcon(): IconType;
-    makeTextIcon(textStyle: TextRenderingStyle): IconType;
-    makePenIcon(strokeSize: number, color: string | Color4, rounded?: boolean): IconType;
-    makeIconFromFactory(pen: Pen, factory: ComponentBuilderFactory, includeTransparencyGrid?: boolean): IconType;
-    makePipetteIcon(color?: Color4): IconType;
-    makeFormatSelectionIcon(): IconType;
-    makeResizeViewportIcon(): IconType;
-    makeDuplicateSelectionIcon(): IconType;
-    makePasteIcon(): IconType;
-    makeDeleteSelectionIcon(): IconType;
-    makeSaveIcon(): IconType;
-    makeConfigureDocumentIcon(): IconType;
-    makeOverflowIcon(): IconType;
+    protected makeIconFromPath(pathData: string, fill?: string, strokeColor?: string, strokeWidth?: string): IconElemType;
+    /**
+     * @returns An object with both the definition of a checkerboard pattern and the syntax to
+     * reference that pattern. The defs provided by this function should be wrapped within a
+     * `<defs></defs>` element.
+     */
+    protected makeCheckerboardPattern(): {
+        patternDef: string;
+        patternRef: string;
+    };
+    /**
+     * @returns true if the given `penStyle` is known to match a rounded tip type of pen.
+     */
+    protected isRoundedTipPen(penStyle: PenStyle): boolean;
+    /** Must be overridden by icon packs that need attribution. */
+    licenseInfo(): string | null;
 }