js-draw 0.15.2 → 0.16.0

package/dist/src/Editor.d.ts

@@ -8,6 +8,7 @@ import { Point2 } from './math/Vec2';
 import HTMLToolbar from './toolbar/HTMLToolbar';
 import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import Display, { RenderingMode } from './rendering/Display';
+import Color4 from './Color4';
 import Pointer from './Pointer';
 import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
@@ -222,7 +223,17 @@ export declare class Editor {
     addAndCenterComponents(components: AbstractComponent[], selectComponents?: boolean): Promise<void>;
     toDataURL(format?: 'image/png' | 'image/jpeg' | 'image/webp'): string;
     toSVG(): SVGElement;
+    /**
+     * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
+     *
+     * @see loadFromSVG
+     */
     loadFrom(loader: ImageLoader): Promise<void>;
+    private getTopmostBackgroundComponent;
+    /**
+     * Set the background color of the image.
+     */
+    setBackgroundColor(color: Color4): Command;
     getImportExportRect(): Rect2;
     setImportExportRect(imageRect: Rect2): Command;
     /**

package/dist/src/Editor.js

@@ -30,6 +30,8 @@ import untilNextAnimationFrame from './util/untilNextAnimationFrame';
 import fileToBase64 from './util/fileToBase64';
 import uniteCommands from './commands/uniteCommands';
 import SelectionTool from './tools/SelectionTool/SelectionTool';
+import Erase from './commands/Erase';
+import ImageBackground, { BackgroundType } from './components/ImageBackground';
 /**
  * The main entrypoint for the full editor.
  *
@@ -233,14 +235,21 @@ export class Editor {
         });
         this.notifier.on(EditorEventType.DisplayResized, _event => {
             this.viewport.updateScreenSize(Vec2.of(this.display.width, this.display.height));
+            this.queueRerender();
         });
-        window.addEventListener('resize', () => {
+        const handleResize = () => {
             this.notifier.dispatch(EditorEventType.DisplayResized, {
                 kind: EditorEventType.DisplayResized,
                 newSize: Vec2.of(this.display.width, this.display.height),
             });
-            this.queueRerender();
-        });
+        };
+        if ('ResizeObserver' in window) {
+            const resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(this.container);
+        }
+        else {
+            addEventListener('resize', handleResize);
+        }
         this.accessibilityControlArea.addEventListener('input', () => {
             this.accessibilityControlArea.value = '';
         });
@@ -706,7 +715,7 @@ export class Editor {
         return dataURL;
     }
     toSVG() {
-        const importExportViewport = this.image.getImportExportViewport();
+        const importExportViewport = this.image.getImportExportViewport().getTemporaryClone();
         const svgNameSpace = 'http://www.w3.org/2000/svg';
         const result = document.createElementNS(svgNameSpace, 'svg');
         const renderer = new SVGRenderer(result, importExportViewport);
@@ -728,10 +737,17 @@ export class Editor {
         result.setAttribute('xmlns', svgNameSpace);
         return result;
     }
+    /**
+     * Load editor data from an `ImageLoader` (e.g. an {@link SVGLoader}).
+     *
+     * @see loadFromSVG
+     */
     loadFrom(loader) {
         return __awaiter(this, void 0, void 0, function* () {
             this.showLoadingWarning(0);
             this.display.setDraftMode(true);
+            const originalBackgrounds = this.image.getBackgroundComponents();
+            const eraseBackgroundCommand = new Erase(originalBackgrounds);
             yield loader.start((component) => __awaiter(this, void 0, void 0, function* () {
                 yield this.dispatchNoAnnounce(EditorImage.addElement(component));
             }), (countProcessed, totalToProcess) => {
@@ -745,11 +761,43 @@ export class Editor {
                 this.dispatchNoAnnounce(this.setImportExportRect(importExportRect), false);
                 this.dispatchNoAnnounce(this.viewport.zoomTo(importExportRect), false);
             });
+            // Ensure that we don't have multiple overlapping BackgroundComponents. Remove
+            // old BackgroundComponents.
+            // Overlapping BackgroundComponents may cause changing the background color to
+            // not work properly.
+            if (this.image.getBackgroundComponents().length !== originalBackgrounds.length) {
+                yield this.dispatchNoAnnounce(eraseBackgroundCommand);
+            }
             this.hideLoadingWarning();
             this.display.setDraftMode(false);
             this.queueRerender();
         });
     }
+    getTopmostBackgroundComponent() {
+        let background = null;
+        // Find a background component, if one exists.
+        // Use the last (topmost) background component if there are multiple.
+        for (const component of this.image.getBackgroundComponents()) {
+            if (component instanceof ImageBackground) {
+                background = component;
+            }
+        }
+        return background;
+    }
+    /**
+     * Set the background color of the image.
+     */
+    setBackgroundColor(color) {
+        let background = this.getTopmostBackgroundComponent();
+        if (!background) {
+            const backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
+            background = new ImageBackground(backgroundType, color);
+            return this.image.addElement(background);
+        }
+        else {
+            return background.updateStyle({ color });
+        }
+    }
     // Returns the size of the visible region of the output SVG
     getImportExportRect() {
         return this.image.getImportExportViewport().visibleRect;

package/dist/src/EditorImage.d.ts

@@ -1,12 +1,11 @@
-import Editor from './Editor';
 import AbstractRenderer from './rendering/renderers/AbstractRenderer';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './math/Rect2';
-import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
 import EventDispatcher from './EventDispatcher';
+import Command from './commands/Command';
 export declare const sortLeavesByZIndex: (leaves: Array<ImageNode>) => void;
 export declare enum EditorImageEventType {
     ExportViewportChanged = 0
@@ -16,6 +15,7 @@ export type EditorImageNotifier = EventDispatcher<EditorImageEventType, {
 }>;
 export default class EditorImage {
     private root;
+    private background;
     private componentsById;
     /** Viewport for the exported/imported image. */
     private importExportViewport;
@@ -25,18 +25,17 @@ export default class EditorImage {
      * @returns a `Viewport` for rendering the image when importing/exporting.
      */
     getImportExportViewport(): Viewport;
-    setImportExportRect(imageRect: Rect2): {
-        apply(editor: Editor): void;
-        unapply(editor: Editor): void;
-        description(_editor: Editor, localizationTable: EditorLocalization): string;
-        onDrop(_editor: Editor): void;
-    };
+    setImportExportRect(imageRect: Rect2): Command;
+    getBackgroundComponents(): AbstractComponent[];
     findParent(elem: AbstractComponent): ImageNode | null;
     queueRerenderOf(elem: AbstractComponent): void;
     /** @internal */
     renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport): void;
-    /** @internal */
-    render(renderer: AbstractRenderer, viewport: Viewport): void;
+    /**
+     * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`)
+     * @internal
+     */
+    render(renderer: AbstractRenderer, viewport: Viewport | null): void;
     /** Renders all nodes, even ones not within the viewport. @internal */
     renderAll(renderer: AbstractRenderer): void;
     /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
@@ -83,6 +82,7 @@ export declare class ImageNode {
     private getChildrenIntersectingRegion;
     getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[];
     getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[];
+    getChildWithContent(target: AbstractComponent): ImageNode | null;
     getLeaves(): ImageNode[];
     addLeaf(leaf: AbstractComponent): ImageNode;
     getBBox(): Rect2;
@@ -90,6 +90,6 @@ export declare class ImageNode {
     private updateParents;
     private rebalance;
     remove(): void;
-    render(renderer: AbstractRenderer, visibleRect: Rect2): void;
+    render(renderer: AbstractRenderer, visibleRect?: Rect2): void;
 }
 export {};

package/dist/src/EditorImage.js

@@ -20,6 +20,7 @@ export default class EditorImage {
     // @internal
     constructor() {
         this.root = new ImageNode();
+        this.background = new ImageNode();
         this.componentsById = {};
         this.notifier = new EventDispatcher();
         this.importExportViewport = new Viewport(() => {
@@ -58,15 +59,24 @@ export default class EditorImage {
             }
         };
     }
-    // Returns the parent of the given element, if it exists.
-    findParent(elem) {
-        const candidates = this.root.getLeavesIntersectingRegion(elem.getBBox());
-        for (const candidate of candidates) {
-            if (candidate.getContent() === elem) {
-                return candidate;
+    // Returns all components that make up the background of this image. These
+    // components are rendered below all other components.
+    getBackgroundComponents() {
+        const result = [];
+        const leaves = this.background.getLeaves();
+        sortLeavesByZIndex(leaves);
+        for (const leaf of leaves) {
+            const content = leaf.getContent();
+            if (content) {
+                result.push(content);
             }
         }
-        return null;
+        return result;
+    }
+    // Returns the parent of the given element, if it exists.
+    findParent(elem) {
+        var _a;
+        return (_a = this.background.getChildWithContent(elem)) !== null && _a !== void 0 ? _a : this.root.getChildWithContent(elem);
     }
     // Forces a re-render of `elem` when the image is next re-rendered as a whole.
     // Does nothing if `elem` is not in this.
@@ -81,19 +91,20 @@ export default class EditorImage {
     }
     /** @internal */
     renderWithCache(screenRenderer, cache, viewport) {
+        this.background.render(screenRenderer, viewport.visibleRect);
         cache.render(screenRenderer, this.root, viewport);
     }
-    /** @internal */
+    /**
+     * Renders all nodes visible from `viewport` (or all nodes if `viewport = null`)
+     * @internal
+     */
     render(renderer, viewport) {
-        this.root.render(renderer, viewport.visibleRect);
+        this.background.render(renderer, viewport === null || viewport === void 0 ? void 0 : viewport.visibleRect);
+        this.root.render(renderer, viewport === null || viewport === void 0 ? void 0 : viewport.visibleRect);
     }
     /** Renders all nodes, even ones not within the viewport. @internal */
     renderAll(renderer) {
-        const leaves = this.root.getLeaves();
-        sortLeavesByZIndex(leaves);
-        for (const leaf of leaves) {
-            leaf.getContent().render(renderer, leaf.getBBox());
-        }
+        this.render(renderer, null);
     }
     /** @returns all elements in the image, sorted by z-index. This can be slow for large images. */
     getAllElements() {
@@ -123,11 +134,19 @@ export default class EditorImage {
     addElementDirectly(elem) {
         elem.onAddToImage(this);
         this.componentsById[elem.getId()] = elem;
-        return this.root.addLeaf(elem);
+        // If a background component, add to the background. Else,
+        // add to the normal component tree.
+        const parentTree = elem.isBackground() ? this.background : this.root;
+        return parentTree.addLeaf(elem);
     }
     removeElementDirectly(element) {
         const container = this.findParent(element);
         container === null || container === void 0 ? void 0 : container.remove();
+        if (container) {
+            this.onDestroyElement(element);
+            return true;
+        }
+        return false;
     }
     /**
      * Returns a command that adds the given element to the `EditorImage`.
@@ -140,7 +159,7 @@ export default class EditorImage {
         return new EditorImage.AddElementCommand(elem, applyByFlattening);
     }
     /** @see EditorImage.addElement */
-    addElement(elem, applyByFlattening = true) {
+    addElement(elem, applyByFlattening) {
         return EditorImage.addElement(elem, applyByFlattening);
     }
 }
@@ -247,6 +266,17 @@ export class ImageNode {
         }
         return result;
     }
+    // Returns the child of this with the target content or `null` if no
+    // such child exists.
+    getChildWithContent(target) {
+        const candidates = this.getLeavesIntersectingRegion(target.getBBox());
+        for (const candidate of candidates) {
+            if (candidate.getContent() === target) {
+                return candidate;
+            }
+        }
+        return null;
+    }
     // Returns a list of leaves with this as an ancestor.
     // Like getLeavesInRegion, but does not check whether ancestors are in a given rectangle
     getLeaves() {
@@ -359,12 +389,12 @@ export class ImageNode {
     // Remove this node and all of its children
     remove() {
         var _a;
+        (_a = this.content) === null || _a === void 0 ? void 0 : _a.onRemoveFromImage();
         if (!this.parent) {
             this.content = null;
             this.children = [];
             return;
         }
-        (_a = this.content) === null || _a === void 0 ? void 0 : _a.onRemoveFromImage();
         const oldChildCount = this.parent.children.length;
         this.parent.children = this.parent.children.filter(node => {
             return node !== this;
@@ -380,7 +410,13 @@ export class ImageNode {
         this.children = [];
     }
     render(renderer, visibleRect) {
-        const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+        let leaves;
+        if (visibleRect) {
+            leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+        }
+        else {
+            leaves = this.getLeaves();
+        }
         sortLeavesByZIndex(leaves);
         for (const leaf of leaves) {
             // Leaves by definition have content

package/dist/src/Viewport.d.ts

@@ -16,6 +16,11 @@ export declare class Viewport {
     private inverseTransform;
     private screenRect;
     constructor(onTransformChangeCallback: TransformChangeCallback);
+    /**
+     * @returns a temporary copy of `this` that does not notify when modified. This is
+     * useful when rendering with a temporarily different viewport.
+     */
+    getTemporaryClone(): Viewport;
     updateScreenSize(screenSize: Vec2): void;
     /** Get the screen's visible region transformed into canvas space. */
     get visibleRect(): Rect2;

package/dist/src/Viewport.js

@@ -24,6 +24,17 @@ export class Viewport {
         this.resetTransform(Mat33.identity);
         this.screenRect = Rect2.empty;
     }
+    /**
+     * @returns a temporary copy of `this` that does not notify when modified. This is
+     * useful when rendering with a temporarily different viewport.
+     */
+    getTemporaryClone() {
+        const result = new Viewport(() => { });
+        result.transform = this.transform;
+        result.inverseTransform = this.inverseTransform;
+        result.screenRect = this.screenRect;
+        return result;
+    }
     // @internal
     updateScreenSize(screenSize) {
         this.screenRect = this.screenRect.resizedTo(screenSize);

package/dist/src/components/AbstractComponent.d.ts

@@ -50,6 +50,7 @@ export default abstract class AbstractComponent {
     transformBy(affineTransfm: Mat33): SerializableCommand;
     setZIndex(newZIndex: number): SerializableCommand;
     isSelectable(): boolean;
+    isBackground(): boolean;
     getProportionalRenderingTime(): number;
     private static transformElementCommandId;
     private static TransformElementCommand;

package/dist/src/components/AbstractComponent.js

@@ -94,6 +94,11 @@ export default class AbstractComponent {
     isSelectable() {
         return true;
     }
+    // @returns true iff this component should be added to the background, rather than the
+    // foreground of the image.
+    isBackground() {
+        return false;
+    }
     // @returns an approximation of the proportional time it takes to render this component.
     // This is intended to be a rough estimate, but, for example, a stroke with two points sould have
     // a renderingWeight approximately twice that of a stroke with one point.

package/dist/src/components/ImageBackground.d.ts

@@ -23,13 +23,14 @@ export default class ImageBackground extends AbstractComponent implements Restyl
     constructor(backgroundType: BackgroundType, mainColor: Color4);
     getStyle(): ComponentStyle;
     updateStyle(style: ComponentStyle): SerializableCommand;
-    forceStyle(style: ComponentStyle, _editor: Editor | null): void;
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
     onAddToImage(image: EditorImage): void;
     onRemoveFromImage(): void;
     private recomputeBBox;
     render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     intersects(lineSegment: LineSegment2): boolean;
     isSelectable(): boolean;
+    isBackground(): boolean;
     protected serializeToJSON(): {
         mainColor: string;
         backgroundType: BackgroundType;

package/dist/src/components/ImageBackground.js

@@ -33,7 +33,7 @@ export default class ImageBackground extends AbstractComponent {
         return createRestyleComponentCommand(this.getStyle(), style, this);
     }
     // @internal
-    forceStyle(style, _editor) {
+    forceStyle(style, editor) {
         const fill = style.color;
         if (!fill) {
             return;
@@ -45,6 +45,10 @@ export default class ImageBackground extends AbstractComponent {
         else {
             this.backgroundType = BackgroundType.SolidColor;
         }
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
     }
     onAddToImage(image) {
         if (this.viewportSizeChangeListener) {
@@ -96,6 +100,9 @@ export default class ImageBackground extends AbstractComponent {
     isSelectable() {
         return false;
     }
+    isBackground() {
+        return true;
+    }
     serializeToJSON() {
         return {
             mainColor: this.mainColor.toHexString(),

package/dist/src/localizations/es.js

@@ -14,5 +14,5 @@ const localization = Object.assign(Object.assign({}, defaultEditorLocalization),
         return `Color fue cambiado a ${color}`;
     }, keyboardPanZoom: 'Mover la pantalla con el teclado', penTool: function (penId) {
         return `Lapiz ${penId}`;
-    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', rerenderAsText: 'Redibuja la pantalla al texto', image: 'Imagen', imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`, imageLoadError: (message) => `Error cargando imagen: ${message}` });
+    }, selectionTool: 'Selecciona', eraserTool: 'Borrador', textTool: 'Texto', enterTextToInsert: 'Entra texto', textSize: 'Tamaño', rerenderAsText: 'Redibuja la pantalla al texto', lockRotation: 'Bloquea rotación', image: 'Imagen', imageSize: (size, units) => `Tamaño del imagen: ${size} ${units}`, imageLoadError: (message) => `Error cargando imagen: ${message}`, toggleOverflow: 'Más', documentProperties: 'Fondo', imageWidthOption: 'Ancho: ', imageHeightOption: 'Alto: ', backgroundColor: 'Color de fondo: ' });
 export default localization;

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

@@ -12,12 +12,19 @@ export default class HTMLToolbar {
     private editor;
     private localizationTable;
     private container;
-    private widgets;
+    private resizeObserver;
+    private listeners;
+    private widgetsById;
+    private widgetList;
+    private overflowWidget;
     private static colorisStarted;
     private updateColoris;
     /** @internal */
     constructor(editor: Editor, parent: HTMLElement, localizationTable?: ToolbarLocalization);
     setupColorPickers(): void;
+    private reLayoutQueued;
+    private queueReLayout;
+    private reLayout;
     /**
      * Adds an `ActionButtonWidget` or `BaseToolWidget`. The widget should not have already have a parent
      * (i.e. its `addTo` method should not have been called).
@@ -63,17 +70,33 @@ export default class HTMLToolbar {
      *
      * @return The added button.
      */
-    addActionButton(title: string | ActionButtonIcon, command: () => void): BaseWidget;
+    addActionButton(title: string | ActionButtonIcon, command: () => void, mustBeToplevel?: boolean): BaseWidget;
     addUndoRedoButtons(): void;
     addDefaultToolWidgets(): void;
     addDefaultActionButtons(): void;
+    /**
+     * 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.
+     */
+    addOverflowWidget(): void;
     /**
      * Adds both the default tool widgets and action buttons. Equivalent to
      * ```ts
      * toolbar.addDefaultToolWidgets();
+     * toolbar.addOverflowWidget();
      * toolbar.addDefaultActionButtons();
      * ```
      */
     addDefaults(): void;
+    remove(): void;
 }
 export {};