js-draw 0.17.2 → 0.17.3

package/dist/src/Editor.d.ts

@@ -234,6 +234,11 @@ export declare class Editor {
      * Set the background color of the image.
      */
     setBackgroundColor(color: Color4): Command;
+    /**
+     * @returns the average of the colors of all background components. Use this to get the current background
+     * color.
+     */
+    estimateBackgroundColor(): Color4;
     getImportExportRect(): Rect2;
     setImportExportRect(imageRect: Rect2): Command;
     /**

package/dist/src/Editor.js

@@ -799,6 +799,20 @@ export class Editor {
             return background.updateStyle({ color });
         }
     }
+    /**
+     * @returns the average of the colors of all background components. Use this to get the current background
+     * color.
+     */
+    estimateBackgroundColor() {
+        var _a;
+        const backgroundColors = [];
+        for (const component of this.image.getBackgroundComponents()) {
+            if (component instanceof ImageBackground) {
+                backgroundColors.push((_a = component.getStyle().color) !== null && _a !== void 0 ? _a : Color4.transparent);
+            }
+        }
+        return Color4.average(backgroundColors);
+    }
     // Returns the size of the visible region of the output SVG
     getImportExportRect() {
         return this.image.getImportExportViewport().visibleRect;

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

@@ -7,6 +7,6 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
+import RestyleableComponent, { createRestyleComponentCommand, isRestylableComponent } from './RestylableComponent';
 import ImageBackground from './ImageBackground';
-export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };
+export { Stroke, TextComponent as Text, RestyleableComponent, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };

package/dist/src/components/lib.js

@@ -7,6 +7,6 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-import { createRestyleComponentCommand } from './RestylableComponent';
+import { createRestyleComponentCommand, isRestylableComponent } from './RestylableComponent';
 import ImageBackground from './ImageBackground';
-export { Stroke, TextComponent as Text, createRestyleComponentCommand, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };
+export { Stroke, TextComponent as Text, createRestyleComponentCommand, isRestylableComponent, TextComponent, Stroke as StrokeComponent, ImageBackground as BackgroundComponent, ImageComponent, };

package/dist/src/toolbar/widgets/DocumentPropertiesWidget.d.ts

@@ -10,7 +10,6 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     private dropdownUpdateQueued;
     private queueDropdownUpdate;
     private updateDropdown;
-    private getBackgroundElem;
     private setBackgroundColor;
     private getBackgroundColor;
     private updateImportExportRectSize;

package/dist/src/toolbar/widgets/DocumentPropertiesWidget.js

@@ -1,5 +1,3 @@
-import Color4 from '../../Color4';
-import ImageBackground from '../../components/ImageBackground';
 import { EditorImageEventType } from '../../EditorImage';
 import Rect2 from '../../math/Rect2';
 import { EditorEventType } from '../../types';
@@ -41,26 +39,11 @@ export default class DocumentPropertiesWidget extends BaseWidget {
             this.updateDropdownContent();
         }
     }
-    getBackgroundElem() {
-        const backgroundComponents = [];
-        for (const component of this.editor.image.getBackgroundComponents()) {
-            if (component instanceof ImageBackground) {
-                backgroundComponents.push(component);
-            }
-        }
-        if (backgroundComponents.length === 0) {
-            return null;
-        }
-        // Return the last background component in the list — the component with highest z-index.
-        return backgroundComponents[backgroundComponents.length - 1];
-    }
     setBackgroundColor(color) {
         this.editor.dispatch(this.editor.setBackgroundColor(color));
     }
     getBackgroundColor() {
-        var _a, _b;
-        const background = this.getBackgroundElem();
-        return (_b = (_a = background === null || background === void 0 ? void 0 : background.getStyle()) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : Color4.transparent;
+        return this.editor.estimateBackgroundColor();
     }
     updateImportExportRectSize(size) {
         const filterDimension = (dim) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.17.2",
+	"version": "0.17.3",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Editor.ts

@@ -1047,6 +1047,22 @@ export class Editor {
 		}
 	}
 
+	/**
+	 * @returns the average of the colors of all background components. Use this to get the current background
+	 * color.
+	 */
+	public estimateBackgroundColor(): Color4 {
+		const backgroundColors = [];
+
+		for (const component of this.image.getBackgroundComponents()) {
+			if (component instanceof ImageBackground) {
+				backgroundColors.push(component.getStyle().color ?? Color4.transparent);
+			}
+		}
+
+		return Color4.average(backgroundColors);
+	}
+
 	// Returns the size of the visible region of the output SVG
 	public getImportExportRect(): Rect2 {
 		return this.image.getImportExportViewport().visibleRect;

package/src/components/lib.ts

@@ -8,7 +8,7 @@ export { default as AbstractComponent } from './AbstractComponent';
 import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
-import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
+import RestyleableComponent, { createRestyleComponentCommand, isRestylableComponent } from './RestylableComponent';
 import ImageBackground from './ImageBackground';
 
 export {
@@ -16,6 +16,7 @@ export {
 	TextComponent as Text,
 	RestyleableComponent,
 	createRestyleComponentCommand,
+	isRestylableComponent,
 
 	TextComponent,
 	Stroke as StrokeComponent,

package/src/toolbar/widgets/DocumentPropertiesWidget.ts

@@ -1,5 +1,4 @@
 import Color4 from '../../Color4';
-import ImageBackground from '../../components/ImageBackground';
 import Editor from '../../Editor';
 import { EditorImageEventType } from '../../EditorImage';
 import Rect2 from '../../math/Rect2';
@@ -56,31 +55,12 @@ export default class DocumentPropertiesWidget extends BaseWidget {
 		}
 	}
 
-	private getBackgroundElem() {
-		const backgroundComponents = [];
-
-		for (const component of this.editor.image.getBackgroundComponents()) {
-			if (component instanceof ImageBackground) {
-				backgroundComponents.push(component);
-			}
-		}
-
-		if (backgroundComponents.length === 0) {
-			return null;
-		}
-
-		// Return the last background component in the list — the component with highest z-index.
-		return backgroundComponents[backgroundComponents.length - 1];
-	}
-
 	private setBackgroundColor(color: Color4) {
 		this.editor.dispatch(this.editor.setBackgroundColor(color));
 	}
 
 	private getBackgroundColor() {
-		const background = this.getBackgroundElem();
-
-		return background?.getStyle()?.color ?? Color4.transparent;
+		return this.editor.estimateBackgroundColor();
 	}
 
 	private updateImportExportRectSize(size: { width?: number, height?: number }) {