js-draw 0.0.1

package/dist/src/Editor.d.ts

@@ -0,0 +1,55 @@
+import EditorImage from './EditorImage';
+import ToolController from './tools/ToolController';
+import { InputEvtType, EditorNotifier, ImageLoader } from './types';
+import Command from './commands/Command';
+import UndoRedoHistory from './UndoRedoHistory';
+import Viewport from './Viewport';
+import { Point2 } from './geometry/Vec2';
+import HTMLToolbar from './toolbar/HTMLToolbar';
+import { RenderablePathSpec } from './rendering/AbstractRenderer';
+import Display, { RenderingMode } from './Display';
+import Pointer from './Pointer';
+import Rect2 from './geometry/Rect2';
+import { EditorLocalization } from './localization';
+export declare class Editor {
+    private container;
+    private renderingRegion;
+    history: UndoRedoHistory;
+    display: Display;
+    image: EditorImage;
+    private importExportViewport;
+    localization: EditorLocalization;
+    viewport: Viewport;
+    toolController: ToolController;
+    notifier: EditorNotifier;
+    private loadingWarning;
+    private accessibilityAnnounceArea;
+    constructor(parent: HTMLElement, renderingMode?: RenderingMode, localization?: Partial<EditorLocalization>);
+    showLoadingWarning(fractionLoaded: number): void;
+    hideLoadingWarning(): void;
+    announceForAccessibility(message: string): void;
+    addToolbar(): HTMLToolbar;
+    private registerListeners;
+    dispatch(command: Command, addToHistory?: boolean): void;
+    private asyncApplyOrUnapplyCommands;
+    asyncApplyCommands(commands: Command[], chunkSize: number): Promise<void>;
+    asyncUnapplyCommands(commands: Command[], chunkSize: number): Promise<void>;
+    private announceUndoCallback;
+    private announceRedoCallback;
+    private rerenderQueued;
+    queueRerender(): void;
+    rerender(showImageBounds?: boolean): void;
+    drawWetInk(...path: RenderablePathSpec[]): void;
+    clearWetInk(): void;
+    createHTMLOverlay(overlay: HTMLElement): {
+        remove: () => void;
+    };
+    addStyleSheet(content: string): HTMLStyleElement;
+    sendPenEvent(eventType: InputEvtType.PointerDownEvt | InputEvtType.PointerMoveEvt | InputEvtType.PointerUpEvt, point: Point2, allPointers?: Pointer[]): void;
+    toSVG(): SVGElement;
+    loadFrom(loader: ImageLoader): Promise<void>;
+    getImportExportRect(): Rect2;
+    setImportExportRect(imageRect: Rect2): Command;
+    loadFromSVG(svgData: string): Promise<void>;
+}
+export default Editor;

package/dist/src/Editor.js

@@ -0,0 +1,366 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import EditorImage from './EditorImage';
+import ToolController from './tools/ToolController';
+import { InputEvtType, EditorEventType } from './types';
+import UndoRedoHistory from './UndoRedoHistory';
+import Viewport from './Viewport';
+import EventDispatcher from './EventDispatcher';
+import { Vec2 } from './geometry/Vec2';
+import Vec3 from './geometry/Vec3';
+import HTMLToolbar from './toolbar/HTMLToolbar';
+import Display, { RenderingMode } from './Display';
+import SVGRenderer from './rendering/SVGRenderer';
+import Color4 from './Color4';
+import SVGLoader from './SVGLoader';
+import Pointer from './Pointer';
+import Mat33 from './geometry/Mat33';
+import { defaultEditorLocalization } from './localization';
+export class Editor {
+    constructor(parent, renderingMode = RenderingMode.CanvasRenderer, 
+    // Uses a default English localization if a translation is not given.
+    localization) {
+        this.localization = defaultEditorLocalization;
+        this.announceUndoCallback = (command) => {
+            this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this.localization)));
+        };
+        this.announceRedoCallback = (command) => {
+            this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this.localization)));
+        };
+        this.rerenderQueued = false;
+        this.container = document.createElement('div');
+        this.renderingRegion = document.createElement('div');
+        this.container.appendChild(this.renderingRegion);
+        this.container.className = 'imageEditorContainer';
+        this.localization = Object.assign(Object.assign({}, this.localization), localization);
+        this.loadingWarning = document.createElement('div');
+        this.loadingWarning.classList.add('loadingMessage');
+        this.loadingWarning.ariaLive = 'polite';
+        this.container.appendChild(this.loadingWarning);
+        this.accessibilityAnnounceArea = document.createElement('div');
+        this.accessibilityAnnounceArea.ariaLive = 'assertive';
+        this.accessibilityAnnounceArea.className = 'accessibilityAnnouncement';
+        this.container.appendChild(this.accessibilityAnnounceArea);
+        this.renderingRegion.style.touchAction = 'none';
+        this.renderingRegion.className = 'imageEditorRenderArea';
+        this.renderingRegion.setAttribute('tabIndex', '0');
+        this.renderingRegion.ariaLabel = this.localization.imageEditor;
+        this.notifier = new EventDispatcher();
+        this.importExportViewport = new Viewport(this.notifier);
+        this.viewport = new Viewport(this.notifier);
+        this.display = new Display(this, renderingMode, this.renderingRegion);
+        this.image = new EditorImage();
+        this.history = new UndoRedoHistory(this, this.announceRedoCallback, this.announceUndoCallback);
+        this.toolController = new ToolController(this, this.localization);
+        parent.appendChild(this.container);
+        // Default to a 500x500 image
+        this.importExportViewport.updateScreenSize(Vec2.of(500, 500));
+        this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
+        this.registerListeners();
+        this.rerender();
+        this.hideLoadingWarning();
+    }
+    // [fractionLoaded] should be a number from 0 to 1, where 1 represents completely loaded.
+    showLoadingWarning(fractionLoaded) {
+        const loadingPercent = Math.round(fractionLoaded * 100);
+        this.loadingWarning.innerText = this.localization.loading(loadingPercent);
+        this.loadingWarning.style.display = 'block';
+    }
+    hideLoadingWarning() {
+        this.loadingWarning.style.display = 'none';
+        this.announceForAccessibility(this.localization.doneLoading);
+    }
+    announceForAccessibility(message) {
+        this.accessibilityAnnounceArea.innerText = message;
+    }
+    addToolbar() {
+        return new HTMLToolbar(this, this.container, this.localization);
+    }
+    registerListeners() {
+        const pointers = {};
+        const getPointerList = () => {
+            const nowTime = (new Date()).getTime();
+            const res = [];
+            for (const id in pointers) {
+                const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
+                if (pointers[id] && (nowTime - pointers[id].timeStamp) < maxUnupdatedTime) {
+                    res.push(pointers[id]);
+                }
+            }
+            return res;
+        };
+        // May be required to prevent text selection on iOS/Safari:
+        // See https://stackoverflow.com/a/70992717/17055750
+        this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
+        this.renderingRegion.addEventListener('pointerdown', evt => {
+            const pointer = Pointer.ofEvent(evt, true, this.viewport);
+            pointers[pointer.id] = pointer;
+            this.renderingRegion.setPointerCapture(pointer.id);
+            const event = {
+                kind: InputEvtType.PointerDownEvt,
+                current: pointer,
+                allPointers: getPointerList(),
+            };
+            this.toolController.dispatchInputEvent(event);
+            return true;
+        });
+        this.renderingRegion.addEventListener('pointermove', evt => {
+            var _a, _b;
+            const pointer = Pointer.ofEvent(evt, (_b = (_a = pointers[evt.pointerId]) === null || _a === void 0 ? void 0 : _a.down) !== null && _b !== void 0 ? _b : false, this.viewport);
+            if (pointer.down) {
+                pointers[pointer.id] = pointer;
+                if (this.toolController.dispatchInputEvent({
+                    kind: InputEvtType.PointerMoveEvt,
+                    current: pointer,
+                    allPointers: getPointerList(),
+                })) {
+                    evt.preventDefault();
+                }
+            }
+        });
+        const pointerEnd = (evt) => {
+            const pointer = Pointer.ofEvent(evt, false, this.viewport);
+            if (!pointers[pointer.id]) {
+                return;
+            }
+            pointers[pointer.id] = pointer;
+            this.renderingRegion.releasePointerCapture(pointer.id);
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.PointerUpEvt,
+                current: pointer,
+                allPointers: getPointerList(),
+            })) {
+                evt.preventDefault();
+            }
+            delete pointers[pointer.id];
+        };
+        this.renderingRegion.addEventListener('pointerup', evt => {
+            pointerEnd(evt);
+        });
+        this.renderingRegion.addEventListener('pointercancel', evt => {
+            pointerEnd(evt);
+        });
+        this.renderingRegion.addEventListener('keydown', evt => {
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.KeyPressEvent,
+                key: evt.key,
+            })) {
+                evt.preventDefault();
+            }
+        });
+        this.container.addEventListener('wheel', evt => {
+            let delta = Vec3.of(evt.deltaX, evt.deltaY, evt.deltaZ);
+            if (evt.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+                delta = delta.times(15);
+            }
+            else if (evt.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+                delta = delta.times(100);
+            }
+            if (evt.ctrlKey) {
+                delta = Vec3.of(0, 0, evt.deltaY);
+            }
+            const pos = Vec2.of(evt.clientX, evt.clientY);
+            if (this.toolController.dispatchInputEvent({
+                kind: InputEvtType.WheelEvt,
+                delta,
+                screenPos: pos,
+            })) {
+                evt.preventDefault();
+                return true;
+            }
+            return false;
+        });
+        this.notifier.on(EditorEventType.DisplayResized, _event => {
+            this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
+        });
+        window.addEventListener('resize', () => {
+            this.notifier.dispatch(EditorEventType.DisplayResized, {
+                kind: EditorEventType.DisplayResized,
+                newSize: Vec2.of(this.display.width, this.display.height),
+            });
+            this.queueRerender();
+        });
+    }
+    dispatch(command, addToHistory = true) {
+        if (addToHistory) {
+            // .push applies [command] to this
+            this.history.push(command);
+        }
+        else {
+            command.apply(this);
+        }
+        this.announceForAccessibility(command.description(this.localization));
+    }
+    // Apply a large transformation in chunks.
+    // If [apply] is false, the commands are unapplied.
+    // Triggers a re-render after each [updateChunkSize]-sized group of commands
+    // has been applied.
+    asyncApplyOrUnapplyCommands(commands, apply, updateChunkSize) {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (let i = 0; i < commands.length; i += updateChunkSize) {
+                this.showLoadingWarning(i / commands.length);
+                for (let j = i; j < commands.length && j < i + updateChunkSize; j++) {
+                    const cmd = commands[j];
+                    if (apply) {
+                        cmd.apply(this);
+                    }
+                    else {
+                        cmd.unapply(this);
+                    }
+                }
+                // Re-render to show progress, but only if we're not done.
+                if (i + updateChunkSize < commands.length) {
+                    yield new Promise(resolve => {
+                        this.rerender();
+                        requestAnimationFrame(resolve);
+                    });
+                }
+            }
+            this.hideLoadingWarning();
+        });
+    }
+    asyncApplyCommands(commands, chunkSize) {
+        return this.asyncApplyOrUnapplyCommands(commands, true, chunkSize);
+    }
+    asyncUnapplyCommands(commands, chunkSize) {
+        return this.asyncApplyOrUnapplyCommands(commands, false, chunkSize);
+    }
+    queueRerender() {
+        if (!this.rerenderQueued) {
+            this.rerenderQueued = true;
+            requestAnimationFrame(() => {
+                this.rerender();
+                this.rerenderQueued = false;
+            });
+        }
+    }
+    rerender(showImageBounds = true) {
+        this.display.startRerender();
+        // Draw a rectangle around the region that will be visible on save
+        const renderer = this.display.getDryInkRenderer();
+        if (showImageBounds) {
+            const exportRectFill = { fill: Color4.fromHex('#44444455') };
+            const exportRectStrokeWidth = 12;
+            renderer.drawRect(this.importExportViewport.visibleRect, exportRectStrokeWidth, exportRectFill);
+        }
+        this.image.render(renderer, this.viewport);
+        this.rerenderQueued = false;
+    }
+    drawWetInk(...path) {
+        for (const part of path) {
+            this.display.getWetInkRenderer().drawPath(part);
+        }
+    }
+    clearWetInk() {
+        this.display.getWetInkRenderer().clear();
+    }
+    createHTMLOverlay(overlay) {
+        overlay.classList.add('overlay');
+        this.container.appendChild(overlay);
+        return {
+            remove: () => overlay.remove(),
+        };
+    }
+    addStyleSheet(content) {
+        const styleSheet = document.createElement('style');
+        styleSheet.innerText = content;
+        this.container.appendChild(styleSheet);
+        return styleSheet;
+    }
+    // Dispatch a pen event to the currently selected tool.
+    // Intented for unit tests.
+    sendPenEvent(eventType, point, allPointers) {
+        const mainPointer = Pointer.ofCanvasPoint(point, eventType !== InputEvtType.PointerUpEvt, this.viewport);
+        this.toolController.dispatchInputEvent({
+            kind: eventType,
+            allPointers: allPointers !== null && allPointers !== void 0 ? allPointers : [
+                mainPointer,
+            ],
+            current: mainPointer,
+        });
+    }
+    toSVG() {
+        const importExportViewport = this.importExportViewport;
+        const svgNameSpace = 'http://www.w3.org/2000/svg';
+        const result = document.createElementNS(svgNameSpace, 'svg');
+        const renderer = new SVGRenderer(result, importExportViewport);
+        const origTransform = importExportViewport.canvasToScreenTransform;
+        // Reset the transform to ensure that (0, 0) is (0, 0)
+        importExportViewport.resetTransform(Mat33.identity);
+        // Render **all** elements.
+        this.image.renderAll(renderer);
+        importExportViewport.resetTransform(origTransform);
+        // Just show the main region
+        const rect = importExportViewport.visibleRect;
+        result.setAttribute('viewBox', `${rect.x} ${rect.y} ${rect.w} ${rect.h}`);
+        result.setAttribute('width', `${rect.w}`);
+        result.setAttribute('height', `${rect.h}`);
+        // Ensure the image can be identified as an SVG if downloaded.
+        // See https://jwatt.org/svg/authoring/
+        result.setAttribute('version', '1.1');
+        result.setAttribute('baseProfile', 'full');
+        result.setAttribute('xmlns', svgNameSpace);
+        return result;
+    }
+    loadFrom(loader) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.showLoadingWarning(0);
+            const imageRect = yield loader.start((component) => {
+                (new EditorImage.AddElementCommand(component)).apply(this);
+            }, (countProcessed, totalToProcess) => {
+                if (countProcessed % 100 === 0) {
+                    this.showLoadingWarning(countProcessed / totalToProcess);
+                    this.rerender(false);
+                    return new Promise(resolve => {
+                        requestAnimationFrame(() => resolve());
+                    });
+                }
+                return null;
+            });
+            this.hideLoadingWarning();
+            this.setImportExportRect(imageRect).apply(this);
+        });
+    }
+    // Returns the size of the visible region of the output SVG
+    getImportExportRect() {
+        return this.importExportViewport.visibleRect;
+    }
+    // Resize the output SVG
+    setImportExportRect(imageRect) {
+        const origSize = this.importExportViewport.visibleRect.size;
+        const origTransform = this.importExportViewport.canvasToScreenTransform;
+        return {
+            apply(editor) {
+                const viewport = editor.importExportViewport;
+                viewport.updateScreenSize(imageRect.size);
+                viewport.resetTransform(Mat33.translation(imageRect.topLeft.times(-1)));
+                editor.queueRerender();
+            },
+            unapply(editor) {
+                const viewport = editor.importExportViewport;
+                viewport.updateScreenSize(origSize);
+                viewport.resetTransform(origTransform);
+                editor.queueRerender();
+            },
+            description(localizationTable) {
+                return localizationTable.resizeOutputCommand(imageRect);
+            },
+        };
+    }
+    // Alias for loadFrom(SVGLoader.fromString).
+    // This is particularly useful when accessing a bundled version of the editor.
+    loadFromSVG(svgData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const loader = SVGLoader.fromString(svgData);
+            yield this.loadFrom(loader);
+        });
+    }
+}
+export default Editor;

package/dist/src/EditorImage.d.ts

@@ -0,0 +1,44 @@
+import Editor from './Editor';
+import AbstractRenderer from './rendering/AbstractRenderer';
+import Viewport from './Viewport';
+import AbstractComponent from './components/AbstractComponent';
+import Rect2 from './geometry/Rect2';
+import { EditorLocalization } from './localization';
+export default class EditorImage {
+    private root;
+    constructor();
+    private addElement;
+    findParent(elem: AbstractComponent): ImageNode | null;
+    private sortLeaves;
+    render(renderer: AbstractRenderer, viewport: Viewport, minFraction?: number): void;
+    renderAll(renderer: AbstractRenderer): void;
+    getElementsIntersectingRegion(region: Rect2): AbstractComponent[];
+    static AddElementCommand: {
+        new (element: AbstractComponent, applyByFlattening?: boolean): {
+            readonly "__#1@#element": AbstractComponent;
+            "__#1@#applyByFlattening": boolean;
+            apply(editor: Editor): void;
+            unapply(editor: Editor): void;
+            description(localization: EditorLocalization): string;
+        };
+    };
+}
+export declare type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
+export declare class ImageNode {
+    private parent;
+    private content;
+    private bbox;
+    private children;
+    private targetChildCount;
+    constructor(parent?: ImageNode | null);
+    getContent(): AbstractComponent | null;
+    getParent(): ImageNode | null;
+    private getChildrenInRegion;
+    getLeavesInRegion(region: Rect2, minFractionOfRegion?: number): ImageNode[];
+    getLeaves(): ImageNode[];
+    addLeaf(leaf: AbstractComponent): ImageNode;
+    getBBox(): Rect2;
+    recomputeBBox(bubbleUp: boolean): void;
+    private rebalance;
+    remove(): void;
+}