js-draw 1.0.1 → 1.1.0

package/src/toolbar/DropdownToolbar.ts

@@ -1,220 +0,0 @@
-import Editor from '../Editor';
-import { defaultToolbarLocalization, ToolbarLocalization } from './localization';
-import BaseWidget from './widgets/BaseWidget';
-import OverflowWidget from './widgets/OverflowWidget';
-import AbstractToolbar, { SpacerOptions } from './AbstractToolbar';
-import { toolbarCSSPrefix } from './constants';
-
-export const makeDropdownToolbar = (editor: Editor): AbstractToolbar => {
-	return new DropdownToolbar(editor, editor.getRootElement());
-};
-
-export default class DropdownToolbar extends AbstractToolbar {
-	protected container: HTMLElement;
-	private resizeObserver: ResizeObserver;
-
-	// Flex-order of the next widget to be added.
-	private widgetOrderCounter: number = 0;
-
-	// Widget to toggle overflow menu.
-	private overflowWidget: OverflowWidget|null = null;
-
-	/** @internal */
-	public constructor(
-		editor: Editor, parent: HTMLElement,
-		localizationTable: ToolbarLocalization = defaultToolbarLocalization,
-	) {
-		super(editor, localizationTable);
-
-		this.container = document.createElement('div');
-		this.container.classList.add(`${toolbarCSSPrefix}root`);
-		this.container.classList.add(`${toolbarCSSPrefix}element`);
-		this.container.classList.add(`${toolbarCSSPrefix}dropdown-toolbar`);
-		this.container.setAttribute('role', 'toolbar');
-		parent.appendChild(this.container);
-
-		if ('ResizeObserver' in window) {
-			this.resizeObserver = new ResizeObserver((_entries) => {
-				this.reLayout();
-			});
-			this.resizeObserver.observe(this.container);
-		} else {
-			console.warn('ResizeObserver not supported. Toolbar will not resize.');
-		}
-	}
-
-	private reLayoutQueued: boolean = false;
-	private queueReLayout() {
-		if (!this.reLayoutQueued) {
-			this.reLayoutQueued = true;
-			requestAnimationFrame(() => this.reLayout());
-		}
-	}
-
-	private reLayout() {
-		this.reLayoutQueued = false;
-
-		if (!this.overflowWidget) {
-			return;
-		}
-
-		const getTotalWidth = (widgetList: Array<BaseWidget>) => {
-			let totalWidth = 0;
-			for (const widget of widgetList) {
-				if (!widget.isHidden()) {
-					totalWidth += widget.getButtonWidth();
-				}
-			}
-
-			return totalWidth;
-		};
-
-		// Returns true if there is enough empty space to move the first child
-		// from the overflow menu to the main menu.
-		const canRemoveFirstChildFromOverflow = (freeSpaceInMainMenu: number) => {
-			const overflowChildren = this.overflowWidget?.getChildWidgets() ?? [];
-
-			if (overflowChildren.length === 0) {
-				return false;
-			}
-
-			return overflowChildren[0].getButtonWidth() <= freeSpaceInMainMenu;
-		};
-
-		const allWidgets = this.getAllWidgets();
-
-		let overflowWidgetsWidth = getTotalWidth(this.overflowWidget.getChildWidgets());
-		let shownWidgetWidth = getTotalWidth(allWidgets) - overflowWidgetsWidth;
-		let availableWidth = this.container.clientWidth * 0.87;
-
-		// If on a device that has enough vertical space, allow
-		// showing two rows of buttons.
-		// TODO: Fix magic numbers
-		if (window.innerHeight > availableWidth * 1.75) {
-			availableWidth *= 1.75;
-		}
-
-		let updatedChildren = false;
-
-		// If we can remove at least one child from the overflow menu,
-		if (canRemoveFirstChildFromOverflow(availableWidth - shownWidgetWidth)) {
-			// Move widgets to the main menu.
-			const overflowChildren = this.overflowWidget.clearChildren();
-
-			for (const child of overflowChildren) {
-				child.addTo(this.container);
-				child.setIsToplevel(true);
-
-				if (!child.isHidden()) {
-					shownWidgetWidth += child.getButtonWidth();
-				}
-			}
-
-			overflowWidgetsWidth = 0;
-			updatedChildren = true;
-		}
-
-		if (shownWidgetWidth >= availableWidth) {
-			// Move widgets to the overflow menu.
-
-			// Start with the rightmost widget, move to the leftmost
-			for (
-				let i = allWidgets.length - 1;
-				i >= 0 && shownWidgetWidth >= availableWidth;
-				i--
-			) {
-				const child = allWidgets[i];
-
-				if (this.overflowWidget.hasAsChild(child)) {
-					continue;
-				}
-
-				if (child.canBeInOverflowMenu()) {
-					shownWidgetWidth -= child.getButtonWidth();
-					this.overflowWidget.addToOverflow(child);
-				}
-			}
-
-			updatedChildren = true;
-		}
-
-		// Hide/show the overflow widget.
-		this.overflowWidget.setHidden(this.overflowWidget.getChildWidgets().length === 0);
-
-		if (updatedChildren) {
-			this.setupColorPickers();
-		}
-	}
-
-	protected override addWidgetInternal(widget: BaseWidget) {
-		const container = widget.addTo(this.container);
-
-		// Ensure that the widget gets displayed in the correct
-		// place in the toolbar, even if it's removed and re-added.
-		container.style.order = `${this.widgetOrderCounter++}`;
-
-		this.queueReLayout();
-	}
-
-	protected override removeWidgetInternal(widget: BaseWidget): void {
-		widget.remove();
-		this.queueReLayout();
-	}
-
-	public override addSpacer(options: Partial<SpacerOptions> = {}) {
-		const spacer = document.createElement('div');
-		spacer.classList.add(`${toolbarCSSPrefix}spacer`);
-
-		if (options.grow) {
-			spacer.style.flexGrow = `${options.grow}`;
-		}
-
-		if (options.minSize) {
-			spacer.style.minWidth = options.minSize;
-		}
-
-		if (options.maxSize) {
-			spacer.style.maxWidth = options.maxSize;
-		}
-
-		spacer.style.order = `${this.widgetOrderCounter++}`;
-		this.container.appendChild(spacer);
-	}
-
-	/**
-	 * Adds a widget that toggles the overflow menu. Call `addOverflowWidget` to ensure
-	 * that this widget is in the correct space (if shown).
-	 *
-	 * @example
-	 * ```ts
-	 * toolbar.addDefaultToolWidgets();
-	 * toolbar.addOverflowWidget();
-	 * toolbar.addDefaultActionButtons();
-	 * ```
-	 * shows the overflow widget between the default tool widgets and the default action buttons,
-	 * if shown.
-	 */
-	public addOverflowWidget() {
-		this.overflowWidget = new OverflowWidget(this.editor, this.localizationTable);
-		this.addWidget(this.overflowWidget);
-	}
-
-	/**
-	 * Adds both the default tool widgets and action buttons. Equivalent to
-	 * ```ts
-	 * toolbar.addDefaultToolWidgets();
-	 * toolbar.addOverflowWidget();
-	 * toolbar.addDefaultActionButtons();
-	 * ```
-	 */
-	public addDefaults() {
-		this.addDefaultToolWidgets();
-		this.addOverflowWidget();
-		this.addDefaultActionButtons();
-	}
-
-	protected override onRemove() {
-		this.container.remove();
-		this.resizeObserver.disconnect();
-	}
-}

package/src/toolbar/EdgeToolbar.test.ts

@@ -1,54 +0,0 @@
-import createEditor from '../testing/createEditor';
-import { makeEdgeToolbar } from './EdgeToolbar';
-
-describe('EdgeToolbar', () => {
-	it('should add widgets when calling .addDefaults', () => {
-		const editor = createEditor();
-		const toolbar = makeEdgeToolbar(editor);
-
-		// Before calling .addDefaults, the toolbar should exist, but have no
-		// widgets.
-		const editorRoot = editor.getRootElement();
-		expect(editorRoot.querySelectorAll('.toolbar-edge-toolbar')).toHaveLength(1);
-		expect(editorRoot.querySelectorAll('.toolbar-edge-toolbar .toolbar-button')).toHaveLength(0);
-
-		toolbar.addDefaults();
-
-		// After, should have widgets.
-		expect(
-			editorRoot.querySelectorAll('.toolbar-edge-toolbar .toolbar-button').length
-		).toBeGreaterThan(0);
-	});
-
-	it('clicking on a tool button should open the associated menu', () => {
-		const editor = createEditor();
-		const toolbar = makeEdgeToolbar(editor);
-		toolbar.addDefaultToolWidgets();
-
-		const editorRoot = editor.getRootElement();
-		const toolButtons = editorRoot.querySelectorAll('.toolbar-edge-toolbar .toolbar-button');
-		const edgemenuContainer = editorRoot.querySelector('.toolbar-edgemenu-container')! as HTMLElement;
-
-		expect(edgemenuContainer).toBeTruthy();
-		expect(toolButtons.length).toBeGreaterThan(3);
-
-		// Before clicking a button, the edgemenu container should have display set to none
-		expect(getComputedStyle(edgemenuContainer).display).toBe('none');
-
-		const firstButton = toolButtons[0] as HTMLElement;
-		firstButton.click();
-
-		// After clicking, should have non-none visibility
-		expect(getComputedStyle(edgemenuContainer).display).not.toBe('none');
-		expect(getComputedStyle(edgemenuContainer).opacity).not.toBe('0'); // Should be fading in
-
-		// The focused button should close the toolbar when clicked (and be within the menu container).
-		const closeButton = edgemenuContainer.querySelector(':focus')! as HTMLElement;
-		expect(closeButton).toBeTruthy();
-
-		closeButton.click();
-
-		// The edge menu should be fading out.
-		expect(getComputedStyle(edgemenuContainer).opacity).toBe('0');
-	});
-});