js-draw 0.1.1 → 0.1.4

package/dist/src/toolbar/HTMLToolbar.js

@@ -6,22 +6,16 @@ import Pen from '../tools/Pen';
 import Eraser from '../tools/Eraser';
 import SelectionTool from '../tools/SelectionTool';
 import { makeFreehandLineBuilder } from '../components/builders/FreehandLineBuilder';
-import { Vec2 } from '../geometry/Vec2';
-import SVGRenderer from '../rendering/renderers/SVGRenderer';
-import Viewport from '../Viewport';
-import EventDispatcher from '../EventDispatcher';
 import { makeArrowBuilder } from '../components/builders/ArrowBuilder';
 import { makeLineBuilder } from '../components/builders/LineBuilder';
 import { makeFilledRectangleBuilder, makeOutlinedRectangleBuilder } from '../components/builders/RectangleBuilder';
 import { defaultToolbarLocalization } from './localization';
-const primaryForegroundFill = `
-	style='fill: var(--primary-foreground-color);'
-`;
-const primaryForegroundStrokeFill = `
-	style='fill: var(--primary-foreground-color); stroke: var(--primary-foreground-color);'
-`;
+import { makeDropdownIcon, makeEraserIcon, makeIconFromFactory, makePenIcon, makeRedoIcon, makeSelectionIcon, makeHandToolIcon, makeUndoIcon, makeTextIcon } from './icons';
+import PanZoom, { PanZoomMode } from '../tools/PanZoom';
+import Mat33 from '../geometry/Mat33';
+import Viewport from '../Viewport';
+import TextTool from '../tools/TextTool';
 const toolbarCSSPrefix = 'toolbar-';
-const svgNamespace = 'http://www.w3.org/2000/svg';
 class ToolbarWidget {
     constructor(editor, targetTool, localizationTable) {
         this.editor = editor;
@@ -39,9 +33,6 @@ class ToolbarWidget {
         this.label = document.createElement('label');
         this.button.setAttribute('role', 'button');
         this.button.tabIndex = 0;
-        this.button.onclick = () => {
-            this.handleClick();
-        };
         editor.notifier.on(EditorEventType.ToolEnabled, toolEvt => {
             if (toolEvt.kind !== EditorEventType.ToolEnabled) {
                 throw new Error('Incorrect event type! (Expected ToolEnabled)');
@@ -60,6 +51,11 @@ class ToolbarWidget {
             }
         });
     }
+    setupActionBtnClickListener(button) {
+        button.onclick = () => {
+            this.handleClick();
+        };
+    }
     handleClick() {
         if (this.hasDropdown) {
             if (!this.targetTool.isEnabled()) {
@@ -76,6 +72,7 @@ class ToolbarWidget {
     // Adds this to [parent]. This can only be called once for each ToolbarWidget.
     addTo(parent) {
         this.label.innerText = this.getTitle();
+        this.setupActionBtnClickListener(this.button);
         this.icon = null;
         this.updateIcon();
         this.updateSelected(this.targetTool.isEnabled());
@@ -126,22 +123,26 @@ class ToolbarWidget {
             this.container.classList.remove('dropdownVisible');
             this.editor.announceForAccessibility(this.localizationTable.dropdownHidden(this.targetTool.description));
         }
+        this.repositionDropdown();
+    }
+    repositionDropdown() {
+        const dropdownBBox = this.dropdownContainer.getBoundingClientRect();
+        const screenWidth = document.body.clientWidth;
+        if (dropdownBBox.left > screenWidth / 2) {
+            this.dropdownContainer.style.marginLeft = this.button.clientWidth + 'px';
+            this.dropdownContainer.style.transform = 'translate(-100%, 0)';
+        }
+        else {
+            this.dropdownContainer.style.marginLeft = '';
+            this.dropdownContainer.style.transform = '';
+        }
     }
     isDropdownVisible() {
         return !this.dropdownContainer.classList.contains('hidden');
     }
     createDropdownIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        icon.innerHTML = `
-		<g>
-			<path
-				d='M5,10 L50,90 L95,10 Z'
-				${primaryForegroundFill}
-			/>
-		</g>
-		`;
+        const icon = makeDropdownIcon();
         icon.classList.add(`${toolbarCSSPrefix}showHideDropdownIcon`);
-        icon.setAttribute('viewBox', '0 0 100 100');
         return icon;
     }
 }
@@ -150,19 +151,7 @@ class EraserWidget extends ToolbarWidget {
         return this.localizationTable.eraser;
     }
     createIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        // Draw an eraser-like shape
-        icon.innerHTML = `
-		<g>
-			<rect x=10 y=50 width=80 height=30 rx=10 fill='pink' />
-			<rect
-				x=10 y=10 width=80 height=50
-				${primaryForegroundFill}
-			/>
-		</g>
-		`;
-        icon.setAttribute('viewBox', '0 0 100 100');
-        return icon;
+        return makeEraserIcon();
     }
     fillDropdown(_dropdown) {
         // No dropdown associated with the eraser
@@ -178,16 +167,7 @@ class SelectionWidget extends ToolbarWidget {
         return this.localizationTable.select;
     }
     createIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        // Draw a cursor-like shape
-        icon.innerHTML = `
-		<g>
-			<rect x=10 y=10 width=70 height=70 fill='pink' stroke='black'/>
-			<rect x=75 y=75 width=10 height=10 fill='white' stroke='black'/>
-		</g>
-		`;
-        icon.setAttribute('viewBox', '0 0 100 100');
-        return icon;
+        return makeSelectionIcon();
     }
     fillDropdown(dropdown) {
         const container = document.createElement('div');
@@ -223,42 +203,190 @@ class SelectionWidget extends ToolbarWidget {
         return true;
     }
 }
-class TouchDrawingWidget extends ToolbarWidget {
+const makeZoomControl = (localizationTable, editor) => {
+    const zoomLevelRow = document.createElement('div');
+    const increaseButton = document.createElement('button');
+    const decreaseButton = document.createElement('button');
+    const zoomLevelDisplay = document.createElement('span');
+    increaseButton.innerText = '+';
+    decreaseButton.innerText = '-';
+    zoomLevelRow.replaceChildren(zoomLevelDisplay, increaseButton, decreaseButton);
+    zoomLevelRow.classList.add(`${toolbarCSSPrefix}zoomLevelEditor`);
+    zoomLevelDisplay.classList.add('zoomDisplay');
+    let lastZoom;
+    const updateZoomDisplay = () => {
+        let zoomLevel = editor.viewport.getScaleFactor() * 100;
+        if (zoomLevel > 0.1) {
+            zoomLevel = Math.round(zoomLevel * 10) / 10;
+        }
+        else {
+            zoomLevel = Math.round(zoomLevel * 1000) / 1000;
+        }
+        if (zoomLevel !== lastZoom) {
+            zoomLevelDisplay.innerText = localizationTable.zoomLevel(zoomLevel);
+            lastZoom = zoomLevel;
+        }
+    };
+    updateZoomDisplay();
+    editor.notifier.on(EditorEventType.ViewportChanged, (event) => {
+        if (event.kind === EditorEventType.ViewportChanged) {
+            updateZoomDisplay();
+        }
+    });
+    const zoomBy = (factor) => {
+        const screenCenter = editor.viewport.visibleRect.center;
+        const transformUpdate = Mat33.scaling2D(factor, screenCenter);
+        editor.dispatch(new Viewport.ViewportTransform(transformUpdate), false);
+    };
+    increaseButton.onclick = () => {
+        zoomBy(5.0 / 4);
+    };
+    decreaseButton.onclick = () => {
+        zoomBy(4.0 / 5);
+    };
+    return zoomLevelRow;
+};
+class HandToolWidget extends ToolbarWidget {
+    constructor(editor, tool, localizationTable) {
+        super(editor, tool, localizationTable);
+        this.tool = tool;
+        this.container.classList.add('dropdownShowable');
+    }
     getTitle() {
-        return this.localizationTable.touchDrawing;
+        return this.localizationTable.handTool;
     }
     createIcon() {
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        // Draw a cursor-like shape
-        icon.innerHTML = `
-		<g>
-			<path d='M11,-30 Q0,10 20,20 Q40,20 40,-30 Z' fill='blue' stroke='black'/>
-			<path d='
-				M0,90 L0,50 Q5,40 10,50
-				L10,20 Q20,15 30,20
-				L30,50 Q50,40 80,50
-				L80,90 L10,90 Z'
-				
-				${primaryForegroundStrokeFill}
-			/>
-		</g>
-		`;
-        icon.setAttribute('viewBox', '-10 -30 100 100');
-        return icon;
+        return makeHandToolIcon();
     }
-    fillDropdown(_dropdown) {
-        // No dropdown
-        return false;
+    fillDropdown(dropdown) {
+        let idCounter = 0;
+        const addCheckbox = (label, onToggle) => {
+            const rowContainer = document.createElement('div');
+            const labelElem = document.createElement('label');
+            const checkboxElem = document.createElement('input');
+            checkboxElem.type = 'checkbox';
+            checkboxElem.id = `${toolbarCSSPrefix}hand-tool-option-${idCounter++}`;
+            labelElem.setAttribute('for', checkboxElem.id);
+            checkboxElem.oninput = () => {
+                onToggle(checkboxElem.checked);
+            };
+            labelElem.innerText = label;
+            rowContainer.replaceChildren(checkboxElem, labelElem);
+            dropdown.appendChild(rowContainer);
+            return checkboxElem;
+        };
+        const setModeFlag = (enabled, flag) => {
+            const mode = this.tool.getMode();
+            if (enabled) {
+                this.tool.setMode(mode | flag);
+            }
+            else {
+                this.tool.setMode(mode & ~flag);
+            }
+        };
+        const touchPanningCheckbox = addCheckbox(this.localizationTable.touchPanning, checked => {
+            setModeFlag(checked, PanZoomMode.OneFingerTouchGestures);
+        });
+        const anyDevicePanningCheckbox = addCheckbox(this.localizationTable.anyDevicePanning, checked => {
+            setModeFlag(checked, PanZoomMode.SinglePointerGestures);
+        });
+        dropdown.appendChild(makeZoomControl(this.localizationTable, this.editor));
+        const updateInputs = () => {
+            const mode = this.tool.getMode();
+            anyDevicePanningCheckbox.checked = !!(mode & PanZoomMode.SinglePointerGestures);
+            if (anyDevicePanningCheckbox.checked) {
+                touchPanningCheckbox.checked = true;
+                touchPanningCheckbox.disabled = true;
+            }
+            else {
+                touchPanningCheckbox.checked = !!(mode & PanZoomMode.OneFingerTouchGestures);
+                touchPanningCheckbox.disabled = false;
+            }
+        };
+        updateInputs();
+        this.editor.notifier.on(EditorEventType.ToolUpdated, event => {
+            if (event.kind === EditorEventType.ToolUpdated && event.tool === this.tool) {
+                updateInputs();
+            }
+        });
+        return true;
     }
-    updateSelected(active) {
-        if (active) {
-            this.container.classList.remove('selected');
-        }
-        else {
-            this.container.classList.add('selected');
-        }
+    updateSelected(_active) {
+    }
+    handleClick() {
+        this.setDropdownVisible(!this.isDropdownVisible());
     }
 }
+class TextToolWidget extends ToolbarWidget {
+    constructor(editor, tool, localization) {
+        super(editor, tool, localization);
+        this.tool = tool;
+        this.updateDropdownInputs = null;
+        editor.notifier.on(EditorEventType.ToolUpdated, evt => {
+            var _a;
+            if (evt.kind === EditorEventType.ToolUpdated && evt.tool === tool) {
+                this.updateIcon();
+                (_a = this.updateDropdownInputs) === null || _a === void 0 ? void 0 : _a.call(this);
+            }
+        });
+    }
+    getTitle() {
+        return this.targetTool.description;
+    }
+    createIcon() {
+        const textStyle = this.tool.getTextStyle();
+        return makeTextIcon(textStyle);
+    }
+    fillDropdown(dropdown) {
+        const fontRow = document.createElement('div');
+        const colorRow = document.createElement('div');
+        const fontInput = document.createElement('select');
+        const fontLabel = document.createElement('label');
+        const colorInput = document.createElement('input');
+        const colorLabel = document.createElement('label');
+        const fontsInInput = new Set();
+        const addFontToInput = (fontName) => {
+            const option = document.createElement('option');
+            option.value = fontName;
+            option.textContent = fontName;
+            fontInput.appendChild(option);
+            fontsInInput.add(fontName);
+        };
+        fontLabel.innerText = this.localizationTable.fontLabel;
+        colorLabel.innerText = this.localizationTable.colorLabel;
+        colorInput.classList.add('coloris_input');
+        colorInput.type = 'button';
+        colorInput.id = `${toolbarCSSPrefix}-text-color-input-${TextToolWidget.idCounter++}`;
+        colorLabel.setAttribute('for', colorInput.id);
+        addFontToInput('monospace');
+        addFontToInput('serif');
+        addFontToInput('sans-serif');
+        fontInput.id = `${toolbarCSSPrefix}-text-font-input-${TextToolWidget.idCounter++}`;
+        fontLabel.setAttribute('for', fontInput.id);
+        fontInput.onchange = () => {
+            this.tool.setFontFamily(fontInput.value);
+        };
+        colorInput.oninput = () => {
+            this.tool.setColor(Color4.fromString(colorInput.value));
+        };
+        colorRow.appendChild(colorLabel);
+        colorRow.appendChild(colorInput);
+        fontRow.appendChild(fontLabel);
+        fontRow.appendChild(fontInput);
+        this.updateDropdownInputs = () => {
+            const style = this.tool.getTextStyle();
+            colorInput.value = style.renderingStyle.fill.toHexString();
+            if (!fontsInInput.has(style.fontFamily)) {
+                addFontToInput(style.fontFamily);
+            }
+            fontInput.value = style.fontFamily;
+        };
+        this.updateDropdownInputs();
+        dropdown.replaceChildren(colorRow, fontRow);
+        return true;
+    }
+}
+TextToolWidget.idCounter = 0;
 class PenWidget extends ToolbarWidget {
     constructor(editor, tool, localization, penTypes) {
         super(editor, tool, localization);
@@ -279,84 +407,18 @@ class PenWidget extends ToolbarWidget {
     getTitle() {
         return this.targetTool.description;
     }
-    makePenIcon(elem) {
-        // Use a square-root scale to prevent the pen's tip from overflowing.
-        const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 2);
-        const color = this.tool.getColor();
-        // Draw a pen-like shape
-        const primaryStrokeTipPath = `M14,63 L${50 - scale},95 L${50 + scale},90 L88,60 Z`;
-        const backgroundStrokeTipPath = `M14,63 L${50 - scale},85 L${50 + scale},83 L88,60 Z`;
-        elem.innerHTML = `
-		<defs>
-			<pattern
-				id='checkerboard'
-				viewBox='0,0,10,10'
-				width='20%'
-				height='20%'
-				patternUnits='userSpaceOnUse'
-			>
-				<rect x=0 y=0 width=10 height=10 fill='white'/>
-				<rect x=0 y=0 width=5 height=5 fill='gray'/>
-				<rect x=5 y=5 width=5 height=5 fill='gray'/>
-			</pattern>
-		</defs>
-		<g>
-			<!-- Pen grip -->
-			<path
-				d='M10,10 L90,10 L90,60 L${50 + scale},80 L${50 - scale},80 L10,60 Z'
-				${primaryForegroundStrokeFill}
-			/>
-		</g>
-		<g>
-			<!-- Checkerboard background for slightly transparent pens -->
-			<path d='${backgroundStrokeTipPath}' fill='url(#checkerboard)'/>
-
-			<!-- Actual pen tip -->
-			<path
-				d='${primaryStrokeTipPath}'
-				fill='${color.toHexString()}'
-				stroke='${color.toHexString()}'
-			/>
-		</g>
-		`;
-    }
-    // Draws an icon with the pen.
-    makeDrawnIcon(icon) {
-        const strokeFactory = this.tool.getStrokeFactory();
-        const toolThickness = this.tool.getThickness();
-        const nowTime = (new Date()).getTime();
-        const startPoint = {
-            pos: Vec2.of(10, 10),
-            width: toolThickness / 5,
-            color: this.tool.getColor(),
-            time: nowTime - 100,
-        };
-        const endPoint = {
-            pos: Vec2.of(90, 90),
-            width: toolThickness / 5,
-            color: this.tool.getColor(),
-            time: nowTime,
-        };
-        const builder = strokeFactory(startPoint, this.editor.viewport);
-        builder.addPoint(endPoint);
-        const viewport = new Viewport(new EventDispatcher());
-        viewport.updateScreenSize(Vec2.of(100, 100));
-        const renderer = new SVGRenderer(icon, viewport);
-        builder.preview(renderer);
-    }
     createIcon() {
-        // We need to use createElementNS to embed an SVG element in HTML.
-        // See http://zhangwenli.com/blog/2017/07/26/createelementns/
-        const icon = document.createElementNS(svgNamespace, 'svg');
-        icon.setAttribute('viewBox', '0 0 100 100');
         const strokeFactory = this.tool.getStrokeFactory();
         if (strokeFactory === makeFreehandLineBuilder) {
-            this.makePenIcon(icon);
+            // Use a square-root scale to prevent the pen's tip from overflowing.
+            const scale = Math.round(Math.sqrt(this.tool.getThickness()) * 4);
+            const color = this.tool.getColor();
+            return makePenIcon(scale, color.toHexString());
         }
         else {
-            this.makeDrawnIcon(icon);
+            const strokeFactory = this.tool.getStrokeFactory();
+            return makeIconFromFactory(this.tool, strokeFactory);
         }
-        return icon;
     }
     fillDropdown(dropdown) {
         const container = document.createElement('div');
@@ -502,10 +564,21 @@ export default class HTMLToolbar {
             closePickerOverlay.style.display = event.open ? 'block' : 'none';
         });
     }
-    addActionButton(text, command, parent) {
+    addActionButton(title, command, parent) {
         const button = document.createElement('button');
-        button.innerText = text;
         button.classList.add(`${toolbarCSSPrefix}toolButton`);
+        if (typeof title === 'string') {
+            button.innerText = title;
+        }
+        else {
+            const iconElem = title.icon.cloneNode(true);
+            const labelElem = document.createElement('label');
+            // Use the label to describe the icon -- no additional description should be necessary.
+            iconElem.setAttribute('alt', '');
+            labelElem.innerText = title.label;
+            iconElem.classList.add('toolbar-icon');
+            button.replaceChildren(iconElem, labelElem);
+        }
         button.onclick = command;
         (parent !== null && parent !== void 0 ? parent : this.container).appendChild(button);
         return button;
@@ -513,10 +586,16 @@ export default class HTMLToolbar {
     addUndoRedoButtons() {
         const undoRedoGroup = document.createElement('div');
         undoRedoGroup.classList.add(`${toolbarCSSPrefix}buttonGroup`);
-        const undoButton = this.addActionButton('Undo', () => {
+        const undoButton = this.addActionButton({
+            label: 'Undo',
+            icon: makeUndoIcon()
+        }, () => {
             this.editor.history.undo();
         }, undoRedoGroup);
-        const redoButton = this.addActionButton('Redo', () => {
+        const redoButton = this.addActionButton({
+            label: 'Redo',
+            icon: makeRedoIcon(),
+        }, () => {
             this.editor.history.redo();
         }, undoRedoGroup);
         this.container.appendChild(undoRedoGroup);
@@ -551,8 +630,17 @@ export default class HTMLToolbar {
             }
             (new SelectionWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
-        for (const tool of toolController.getMatchingTools(ToolType.TouchPanZoom)) {
-            (new TouchDrawingWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        for (const tool of toolController.getMatchingTools(ToolType.Text)) {
+            if (!(tool instanceof TextTool)) {
+                throw new Error('All text tools must have kind === ToolType.Text');
+            }
+            (new TextToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
+        }
+        for (const tool of toolController.getMatchingTools(ToolType.PanZoom)) {
+            if (!(tool instanceof PanZoom)) {
+                throw new Error('All SelectionTools must have kind === ToolType.PanZoom');
+            }
+            (new HandToolWidget(this.editor, tool, this.localizationTable)).addTo(this.container);
         }
         this.setupColorPickers();
     }

package/dist/src/toolbar/icons.d.ts

@@ -0,0 +1,12 @@
+import { ComponentBuilderFactory } from '../components/builders/types';
+import { TextStyle } from '../components/Text';
+import Pen from '../tools/Pen';
+export declare const makeUndoIcon: () => SVGSVGElement;
+export declare const makeRedoIcon: (mirror?: boolean) => SVGSVGElement;
+export declare const makeDropdownIcon: () => SVGSVGElement;
+export declare const makeEraserIcon: () => SVGSVGElement;
+export declare const makeSelectionIcon: () => SVGSVGElement;
+export declare const makeHandToolIcon: () => SVGSVGElement;
+export declare const makeTextIcon: (textStyle: TextStyle) => SVGSVGElement;
+export declare const makePenIcon: (tipThickness: number, color: string) => SVGSVGElement;
+export declare const makeIconFromFactory: (pen: Pen, factory: ComponentBuilderFactory) => SVGSVGElement;